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