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

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


امیر سروری ۶ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت دوشنبه, ۲۳ام خرداد , ۱۳۹۰ 12197 بازدید

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

}


نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۶ دیدگاه برای این نوشته ثبت شده است


  1. احمد
    ۲۴ خرداد ۱۳۹۰

    آقا ، آموزنده بود مرسی




  2. من
    ۹ آبان ۱۳۹۰

    سلام
    خیلی دنبال کاربرد دستور margin بودم
    بسیار از شما ممنونم




  3. جوادزاده
    ۱۶ بهمن ۱۳۹۰

    این روش آموزش شما بسیار عالیست. تبریک میگم معلم خوبی هستید



  4. سلام.
    مدت ها بود به دنبال توضیح جامع بودم.
    البته بیشتر بخش ها رو تجربی بدست اورده بودم ولی در کنار هم همه چیز رو واضح کرد.بسیار ممنون




  5. jj
    ۱۸ اسفند ۱۳۹۲


  6. دیزل ژنراتور
    ۲۰ بهمن ۱۳۹۳

    مطلب جالبی بود
    فقط توی بخش دیدگاهتون چسبیده به توضیحاتش



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.