collapsing margin

Question

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

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

طراحی وب

محمد مهدی سلیمانی

5 مرداد 00

Answer 1

حذف شده

سلام

فرض کن دو تا تگ 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

6 مرداد 00

collapsing margin

سوالات مرتبط