Margin Collapsing

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>
ul li {
margin-top: 20px;
margin-bottom: 30px;
}

block 物件的垂直 margin 常會遇到幾個狀況:

1.前一個物件的 margin-bottom 會跟後一個物件的 margin-top 發生 margin collapsing
margin 不是 20 + 30px,而是取其中大的 30px

2.第一個物件的 margin-top 被父元素搶走去當 margin-top

3.最後一個物件的 margin-bottom 被父元素搶走去當 margin-bottom 這要看父元素有沒有設定 height

而 inline-block、float 或是有border、padding的情況不會產生 margin collapsing

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s