آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

margin و padding در CSS

CSS

فصل چهارم : Properties در CSS

جلسه هفتم  : margin و padding در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در این جلسه ی آموزشی قصد دارم خصوصیات margin و Padding در CSS یا به عبارتی box model در css رو خدمتتون آموزش بدم . البته box model شامل border هم میشه که اون رو جلسات گذشته آموزش دادم .

 margin

Margin

توسط این خاصیت شما میتونید یک فاصله بین عنصر فرزند و عنصر والد ایجاد کنید . به کد زیر دقت کنید :

در اینجا عنصر والد رو body قرار میدیم و عنصر فرزند ChildElement در نظر میگیریم . اگر ما بخوایم این کادر رو از حاشیه ی Body به اندازه ی ۵۰ پیکسل فاصله بدیم باید margin رو برای این عنصر ۵۰px در نظر بگیریم .

در این صورت کادر childElement به اندازه ۵۰ پیکسل از سمت چپ ، راست ، بالا و پایین از body فاصله میگیره . به طور کلmargin  رو فاصله ی بیرونی می نامیم .

 

قاعده دستوری Margin

Margin : margin-top margin-right margin-bottom margin-left

مثال  margin : 10px 20px 15px 40px

در این مثال ما به اندازه ی ۱۰ پیکسل از بالا ۲۰پیکسل از راست ۱۵ پیکسل از پایین و ۴۰ پیکسل از سمت چپ بین عنصر والد و فرزند فاصله ایجاد کردیم .

 

نحوه ی نوشتن margin به اشکال مختلف

 

  • margin:10px 5px 15px 20px;
    • سمت بالا ۱۰px
    • سمت راست ۵px
    • سمت پایین ۱۵px
    • سمت چپ ۲۰px

 

  • margin:10px 5px 15px;
    • سمت بالا ۱۰px
    • سمت راست و چپ  ۵px
    • سمت پایین ۱۵px

 

  • margin:10px 5px;
    • سمت بالا و پایین  ۱۰px
    • سمت راست و چپ  ۵px

 

  • margin:10px;
    • سمت بالا و راست و پایین و چپ ۱۰px

 

علاوه بر خلاصه نویسی در مثال های بالا شما میتونید از خصوصیات مجزای margin  هم استفاده کنید .

Margin-top : فاصله از بالا

Margin-right: فاصله از راست

Margin-bottom : فاصله از پایین

Margin-left: فاصله از چپ

 

نمونه :  margin-top : 20px

در این نمونه شما تنها از سمت بالا یک فاصله ۲۰ پیکسلی ایجاد میکنید .

 

 

Padding

توسط این خاصیت شما می تونید یک فاصله ی داخلی ایجاد کنید . به کد زیر دقت کنید :

در اینجا عنصر والد مد نظر ما نیست . ما یک فاصله از لبه ی عنصر فرزند به داخل ایجاد می کنیم .

در مثال بالا ما فاصله ای به اندازه ۳۰ پیکسل بین لبه ی کادر و محتوای درون کادر ایجاد کردیم . همونطور که در تصویر ابتدای مقاله میبینید ، padding فاصله ی محتوای درون کادر رو با لبه ی کادر تعیین می کنه . به طور کل padding رو فاصله ی داخلی می نامیم .

 

قاعده دستوری Padding

Padding : Padding-top Padding-right Padding-bottom Padding-left

مثال  Padding : 10px 20px 15px 40px

در این مثال ما به اندازه ی ۱۰ پیکسل از بالا ۲۰پیکسل از راست ۱۵ پیکسل از پایین و ۴۰ پیکسل از سمت چپ از لبه ی کادر تا محتوای داخل کادر فاصله ایجاد کردیم.

 

نحوه ی نوشتن Padding به اشکال مختلف

 

  • Padding :10px 5px 15px 20px;
    • سمت بالا ۱۰px
    • سمت راست ۵px
    • سمت پایین ۱۵px
    • سمت چپ ۲۰px

 

  • Padding :10px 5px 15px;
    • سمت بالا ۱۰px
    • سمت راست و چپ  ۵px
    • سمت پایین ۱۵px

 

  • Padding :10px 5px;
    • سمت بالا و پایین  ۱۰px
    • سمت راست و چپ  ۵px

 

  • Padding :10px;
    • سمت بالا و راست و پایین و چپ ۱۰px

 

علاوه بر خلاصه نویسی در مثال بالا شما میتونید از خصوصیات مجزایpadding  هم استفاده کنید .

Padding-top : فاصله از بالا

Padding-right: فاصله از راست

Padding-bottom : فاصله از پایین

Padding-left: فاصله از چپ

 

نمونه :  padding-right : 20px

در این نمونه شما تنها از سمت راست یک فاصله ۲۰ پیکسلی ایجاد میکنید .

 

خوب دوستان این جلسه ی آموزشی هم به اتمام رسید ، امیدوارم که مفید واقع شده باشه . در انتها میتونید فایل مربوط به این جلسه رو دانلود کنید .

تهیه شده در مدرسه مجازی ایرانیان

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • hassany

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

وبلاگ مدرسه

مختصری درباره ما
مدرسه مجازی ایرانیان در زمینه آموزش علوم و فنون طراحی و برنامه نویسی صفحات وب اعم از آموزش زبان های برنامه نویسی و کدنویسی و همچنین آموزش طراحی گرافیک توسط نرم افزارهای گرافیکی پیکسلی و برداری فعالیت دارد .
ورود به وبلاگ

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟