CSS - 負邊距刪除父母的填充

Question

使用負邊距來移除包裝元素的填充是否是一種很好的做法？

例如，下列哪些代碼段最適合使用？

<div style="padding: 5px;"> 
Shortened width string 
<div style="margin: 0 -5px;">Full width string</div> 
Shortened width string 
</div> 

或

<div> 
<div style="padding: 5px;">Shortened width string</div> 
<div>Full width string</div> 
<div style="padding: 5px;">Shortened width string</div> 
</div> 

Answer 1

那麼它的近乎是一個黑客。只要它用於剋制，我會說沒關係。關鍵是要確保它易於閱讀和理解。如果需要，請添加註釋。

Answer 2

爲什麼不只是聲明padding:5px 0;所以你沒有水平填充？雖然我會爭辯說使用負邊距是完全正確的，但這是他們所做的，但如果你能避免它們，那就這樣做吧。

Answer 3

第二是遠遠優越。應該避免負邊距，因爲它們會在IE中導致問題。

Answer 4

負邊距其隱藏分區...。下面是特技 使用變焦：1，位置：相對

下面是實施例

問題：

.container{ 
padding: 20px; 
} 
.toolbar{ 
margin-top: -10px ; 
} 

在工具欄的div隱藏本身的IE紅色區域

。即使我們正在使用縮放：1.要擺脫這個問題，我們需要添加位置：相對也是。

解決方案：

所以你的CSS類將成爲

.container{ 
padding: 20px; 
} 
.toolbar{ 
margin-top: -10px ; 
zoom: 1; 
position: relative; 
}