collapsing margin

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام خدمت دوستان

کسی در رابطه با Collapsing margin اطلاعاتی داره ؟

سلام

فرض کن دو تا تگ div و p داریم، حالا اگه بیایم به این دو تگ margin عمودی مثلا 30px بدیم، margin بالا و پایین دو تا تگ میوفته روی هم!!

یعنی چی؟ یعنی فاصله بیرونی از پایین برای عنصر بالاتر(div) و فاصله بیرونی از بالا برای عنصر پایین تر(p) همون 30px میمونه! و مقدار margin از بالا و پایین دوتا تگ با هم جمع نمیشه، که بشه 60px، و فاصله عمودی بین این دوتا تگ div و p همون 30px میمونه. به اصطلاح به این کار میگن margin collapsing

و اینکه این margin collapsing فقط در راستای عمودی رخ میده و راستای افقی رخ نمیده!!

  <style>
        div{
            width: 80px;
            height: 80px;
            background-color: blue;
            margin: 30px 0;
        }
        p{
            width: 80px;
            height: 80px;
            background-color: red;
            margin: 30px 0;
        }
    </style>
<body>
        <div></div>
         <p></p>
</body>

بهترین پاسخ

Mehdi H ۰۶ مرداد ۱۴۰۰، ۰۸:۵۵