margin collapsing در زبان CSS فاصله عمود بین عناصر

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

در این مقاله کاربردی از سایت آموزی شما همراهان گرامی را با اصطلاح margin collapsing در css آشنا می کنیم. ویژگی margin در زبان سی اس اس جهت تعیین فاصله بیرونی تگ های HTML از ۴ جهت اصلی کاربرد دارد.

این ویژگی به عنوان یک Property مختصر شده در داخل خود شامل ۴ ویژگی دیگر CSS به ترتیب زیر می باشد:

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

margin collapsing زبان CSS فاصله عمود بین عناصر - سایت آموزی

مفهوم margin collapsing راستای عمود در زبان طراحی سی اس اس

همانطور که می دانیم توسط ویژگی margin برای یک تگ HTML می توانیم هم فاصله بیرونی در راستای افق ( چپ و راست ) و هم فاصله بیرونی در راستای عمود ( بالا و پایین ) تعیین کنیم.

حالا لازم است شما را با اصطلاحی در زبان CSS به نام margin collapsing آشنا کنم.

فرض کنید در صفحه وب خود دو تگ <div> تعریف کرده اید، و این را هم می دانیم که تگ های <div> به صورت پیش فرض ویژگی margin برایشان تعریف نشده و هدف ما این است که بین این دو عنصر <div> یک فاصله بیرونی عمودی برقرار شود.

در صورتی که دو تگ <div> مقدار margin یکسانی مثلا ۲۰px را از اطراف به خود اختصاص دهند، در فاصله عمودی بین این دو تگ <div> شاهد margin collapsing خواهیم بود. و به عبارت دیگر margin بالا و پایین عناصر مذکور روی هم می افتد.

یعنی فاصله بیرونی از پایین برای عنصر بالاتر و فاصله بیرونی از بالا برای عنصر پایین تر همان ۲۰px خواهد بود و مقدار margin از بالا و پایین در دو تگ با هم جمع نمی شود، که معادل ۴۰px باشد، و فاصله عمودی بین این دو تگ <div> دقیقا ۲۰px می باشد.

حالا اگر مثلا برای یکی از عناصر <div> فاصله بیرونی از اطراف یا margin را ۳۰px و برای عنصر <div> دیگر فاصله بیرونی از اطراف یا margin را ۲۰px در نظر بگیریم، در راستای عمود فاصله بین دو تگ مذکور مقدار بزرگتر یعنی ۳۰px در نظر گرفته می شود. و در اصطلاح margin collapsing رخ می دهد.

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

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

نکته مهم

توجه داشته باشید که margin collapsing تنها در راستای عمود بین دو تگ html رخ می دهد. و در راستای افقی یعنی چپ و راست رخ نمی دهد.

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

margin collapsing زبان CSS فاصله عمود بین عناصر – اختصاصی سایت آموزی