有人可以解釋塌陷邊緣？我覺得他們非常惱人

Question

我有一個包含一個鏈接一個div：

<div id="like_bar"><a href="#" onclick="return false;" id="like"></a></div> 

與一些CSS：

#like_bar{ 
    width:140px; 
    height:26px; 
    background:url('bar.jpg'); 
} 
#like{ 
    display:block; 
    width:20px; 
    height:20px; 
    margin:3px 36px; 
    background:url('mini_img.png'); 
} 

鏈接放置在酒吧的頂部和鏈路上的利潤適用於酒吧。
這很煩人。

---

有人可以解釋這些崩潰邊緣，如何避免它們以及它們的用途。

Answer 1

有很多方法可以「解決這個問題」。

也許最簡單的你會是這樣：

#like_bar { 
    overflow: hidden 
} 

其他方式包括：

• 添加一些padding
• 添加border（甚至border: 1px solid transparent就夠了）
• float的元素
• position: absolute
• 而且，與上面的代碼片段一樣，將overflow設置爲非默認值visible的值。

---

你還問：

他們使用什麼

一個常見的情況是<p>標籤。

參見：http://jsfiddle.net/thirtydot/tPaTY/

了無空白崩潰，某些事情會變得討厭。

Answer 2

因爲我懶，我只是要鏈接到一些資源：

My answer here解釋了爲什麼盒模型是事情是這樣的，這是關係到利潤率塌陷被列入。

w3c css spec定義了邊緣摺疊的行爲。這是盒子模型給出的方便的預期行爲。您無需擔心內容塊之間的雙倍餘量。它聽起來像你其實想要的是一些填充#like左右，而不是利潤率。

把CSS想象成以內容爲中心的→ out樣式，而不是在編程外的→的方法。