CSS Box解釋 - 內邊距和外邊距影響高度

我無法理解這一點，但使用包含內部div的基本div，如果您從div元素中刪除邊框樣式，那麼高度爲整體箱子受到影響？！？有人可以爲我解釋這個嗎？CSS Box解釋 - 內邊距和外邊距影響高度

<div style="background-color:red;border:1px solid black;"> 
    <div style="margin:10px;background-color:blue;border:1px solid black;"> 
     <p style="margin:30px;background-color:gray;border:1px solid black;">test</p> 
    </div> 
</div>

你們能模擬這個嗎？如果刪除邊框樣式，高度會發生變化嗎？希望有人能對此有所瞭解非常感謝！

來源

2010-12-13 Sid

是的，這就是它的工作原理 – 2010-12-13 19:32:34

高度（和寬度）由CSS寬度，高度（或寬度），邊距和填充的總和決定。這就是所謂的CSS盒模型和W3Schools有一個詳細的explanation。

來源

2010-12-13 19:53:26 jhuebsch

這不完全正確。填充（不是邊距）確實會影響「可見」寬度。保證金影響利潤率。 http://www.w3.org/TR/CSS21/images/boxdim.png。元素寬度是：寬度+左/右填充+左/右邊界。「邊界之後的一切」並不完全是元素寬度。 – Flack 2010-12-13 20:48:48

關於第二個想法，從技術上講，邊緣是在元素上指定的，而w3schools在計算寬度時是正確的。但是，我的教學經驗告訴我，這種措辭通常會誤導人們。這是因爲保證金是透明的並且不包含可見內容。 – Flack 2010-12-13 20:59:43

當您添加一個邊框時，它會將指定的任意數量的像素添加到該元素的外部，因此在這種意義上它會改變元素的高度。

如果它沒有固定的高度，它會影響它所在的div的高度。

希望這有助於一些。

來源

2010-12-13 19:36:24

CSS Box解釋 - 內邊距和外邊距影響高度

回答

相關問題