Margin , Padding – خلاصه نویسی دستورات CSS

خلاصه نویسی دستورات 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;

}