جلسه ۰۷ : فضای بین عناصر ( margin ) در CSS

• جزئیات
• نوع مطلبآموزشی تصویری

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش کار با فضای بین عناصر html در css بپردازیم. در css ویژگی margin  این امکان را می دهد که بین عناصر html فضای خالی به عنوان فاصله بین عناصر ایجاد کرده و آن را مدیریت کنید. با این ویژگی ظاهر قالب وب سایت شما زیباتر شده و عناصر html از هم تفکیک می شوند. و بیشتر به چشم می آیند.

در پست های آموزشی قبلی برای زیباتر شدن قالب وب سایت شما و ظاهر عناصر آن ، پست های آموزشی کار با ویژگی های border در css و  آموزش تنظیمات تصویر پس زمینه در css را ارائه کردیم.

در صورتی که اطلاعات کمی در مود css دارید ، می توانید پست آموزشی ساختار کد نویسی css را جهت آشنایی بهتر با css، بررسی کنید. در ادامه این پست به  آموزش کار با فضای بین عناصر html در css می پردازیم.

Margin- کار با فضای بین عناصر html در css

کار با فضای بین عناصر html در css

برای کار با فضای بین عناصر html در css ، شما کنترل کامل بر حاشیه (margin) ها را دارید. این ویژگی امکان تنظیم حاشیه برای هر طرف یک عنصر (بالا، راست، پایین و سمت چپ) را در اختیار شما قرار می دهد.

نمونه ای از مشخص کردن margin عناصر html در CSS:

کار با فضای بین عناصر، در هر یک از جهت ها  (بالا، راست، پایین و سمت چپ)

CSS دارای خصوصیات برای تعیین حاشیه برای هر طرف یک عنصر است:

• margin-top
• margin-right
• margin-bottom
• margin-left

مقادیر ویژگی margin می تواند هر یک از فرمت های زیر باشد:

• auto : در این حالت مرورگر به صورت خودکار اندازه فضای حاشیه را محاسبه می کند.
• length : در این حالت باید اندازه فضای حاشیه برحسب واحد های px, pt, cm, etc تعیین کنید.
• % : در این حالت باید اندازه فضای حاشیه برحسب درصد تعیین کنید.
• inherit : در این حالت اندازه فضا ، از عنصر والد یا بالاتر دریافت می شود.

در مثال زیر فضاهای خالی مختلف برای چهار جهت اصلی عناصر html ارائه شده است:

کوتاه کردن کدها

برای کوتاه تر کردن کدها شما می توانید اندازه فضای حاشیه برای هر ۴ جهت را که در مثال قبلی ذکر شده، در یک خط بصورت مختصر قرار دهید، فقط باید ترتیب ۴ جهت اصلی را در css بدانید، که ترتیب آن به این صورت است:

• margin-top
• margin-right
• margin-bottom
• margin-left

مثلا تفسیر کد کوتاه شده margin: 25px 50px 75px 100px به صورت زیر است:

• Top: فضای حاشیه بالا ۲۵px است.
• Right : فضای حاشیه راست ۵۰px است.
• Bottom: فضای حاشیه پایین ۷۵px است.
• Left: فضای حاشیه چپ ۱۰۰px است.

مثال کد بالا در css:

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

اگر در ویژگی margin سه مقدار را تعیین کنیم، ترتیب اعمال آن به صورت زیر خواهد بود:

• margin: 25px 50px 75px
  • margin بالایی ۲۵px
  • margin های راست و چپ ۵۰px
  • margin پایینی نیز ۷۵px

اگر در ویژگی margin دو مقدار را تعیین کنیم، ترتیب اعمال آن به صورت زیر خواهد بود:

• margin: 25px 50px
  • margin های بالا و پایین ۲۵px است.
  • margin های چپ و راست ۵۰px است.

اگر در ویژگی margin یک مقدار را تعیین کنیم، ترتیب اعمال آن به صورت زیر خواهد بود:

• margin: 25px
  • هر چهار margin مقدار ۲۵px خواهد گرفت.

مقدار auto (اندازه خودکار)

مقدار auto این امکان را فراهم می کند که اندازه های فضای حاشیه عنصر html  بر اساس اندازه عرض (width) که توسط شما تعیین می شود. بصورت خودکار محاسبه و اعمال شود.

عنصر html سپس عرض (width)  مشخص شده را می گیرد. و فضای باقیمانده به طور مساوی بین حاشیه های چپ و راست تقسیم می شود.

مثال:

مقدار inherit (اندازه وراثتی)

در این حالت مقدار فضای حاشیه یک عنصر از عنصر دیگری به ارث می رسد!

در این مثال اجازه می دهد که حاشیه سمت چپ عنصر <p class = “ex1”> از عنصر والد (<div>) به ارث برده شود:

تعیین اندازه حاشیه فقط یک جهت در کد کوتاه شده

در مثال های قبل چگونگی کوتاه کردن کد را ارائه کردیم، شما می توانید در کد کوتاه شده، اندازه فقط یک جهت را تعیین کنید.

مثال: در اینجا فقط اندازه حاشیه بالا و پایین تعیین شده است!

در مثال فوق عنصر <h1> خصوصیت margin پایینی آن ۵۰px خواهد بود و برای عنصر <h2> نیز خصوصیت margin بالایی آن ۲۰px خواهد بود.

تمام خصوصیات margin در CSS

کلام آخر

در حالت عادی در عناصر HTML صفحه وب، فاصله ای بین آن ها وجود نداشته و آن ها به یکدیگر می چسبند، برای جلوگیری از این مشکل کافیست کار با فضای بین عناصر html در css را بدانید و از آن استفاده کنید.