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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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