禁止物品的邊距溢出其容器

Question

我有一個包含用戶生成內容的DIV。這些內容可能並將從具有margin-top的項目開始，並且margin-top溢出容器，以便容器和前面的元素之間會有間隙。我發現你可以將容器設置爲display:inline-block,float:left/right或給它一個padding-top值。

如果您執行前兩個選項之一，則容器將其寬度縮小爲其包含的元素。因爲填充會產生空隙，所以填充頂部不是選項。基本上你可以爲容器設置一個特定的寬度，但問題是有一個60 +佈局的模板系統，我不能編輯所有的模板。

所以我想知道，你看到任何CSS方式來擺脫這個邊緣溢出問題或這裏的縮小問題？

Answer 1

其中一種方法是添加「overflow：hidden;」給其父母。但是，如果你有內容需要溢出父母的界限，這並不總是一種選擇。

實施例：http://jsfiddle.net/cLxhE/1/

的另一種方法是使用僞元素以清除它。但它在IE7及以下版本中不起作用。

實施例：http://jsfiddle.net/cLxhE/2/

Answer 2

您可以將用戶添加的內容前添加到您的div容器的頂部：

<div>&nbsp;</div> 

然後給它0像素的高度。