خلاصه نویسی دستورات CSS – Margin / Padding
برای آشنایی بیشتر با خصوصیت Margin , Padding میتوانید مطلب مفهوم Box Model و آشنایی با مفاهیم Padding , Margin , Border را مطالعه نمائید
Margin , Padding properties – خواص و توانایی های پیش فرض برای Margin , Padding
element {
margin-top: number+unit;
margin-right: number+unit;
margin-bottom: number+unit;
margin-left: number+unit;
}
the Margin , Padding shorthand property – توانایی های Margin , Padding به صورت خلاصه نویسی شده
element {
margin: top right bottom lefr;
}
مقادیر تعیین شده به صورت مجزا برای چهار جهت . مقادیر به ترتیب به صورت top , right , bottom , left در جهت ساعتگرد تعیین می شوند .
example – مثال
مثال به صورت خلاصه نویسی شده
element {
margin: 10px 5px 3px 7px;
}
مثال به صورت خلاصه نویسی نشده
element {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 3px;
margin-left: 7px;
}
هنگامی که یک مقدار برای Margin و Padding تعیین می شود ، این مقدار در چهار جهت اعمال خواهد شد
element {
margin: all ;
}
مثال به صورت خلاصه نویسی شده
element {
margin: 5px ;
}
مثال به صورت خلاصه نویسی نشده
element {
margin: 5px 5px 5px 5px ;
}
element {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
در صورت یکسان بودن مقادیر Margin و Padding برای دو گروه از جهات top , bottom — left , right میتوانید از روش زیر استفاده نمائید
element {
margin: top/bottom right/left ;
}
مثال به صورت خلاصه نویسی شده
element {
margin: 10px 5px ;
}
مثال به صورت خلاصه نویسی نشده
element {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}
می توان به روش زیر نیز عمل نمود
element {
margin: 10px 5px 10px 5px ;
}
در مواردی خاص نیز می توانید از روش زیر برای خلاصه نویس CSS استفاده نمائید
element {
margin:top left/right bottom;
}
مثال به صورت خلاصه نویسی شده
element {
margin:10px 3px 5px;
}
مثال به صورت خلاصه نویسی نشده
element {
margin-top: 10px;
margin-right: 3px;
margin-bottom: 5px;
margin-left: 3px;
}
در این رابطه بخوانید
احمد
۲۴ خرداد ۱۳۹۰
آقا ، آموزنده بود مرسی
من
۹ آبان ۱۳۹۰
سلام
خیلی دنبال کاربرد دستور margin بودم
بسیار از شما ممنونم
جوادزاده
۱۶ بهمن ۱۳۹۰
این روش آموزش شما بسیار عالیست. تبریک میگم معلم خوبی هستید