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解释 - 内边距和外边距影响高度

回答

相关问题