HTML – Box模型有什么用？儿童保证金影响父母

概述HTML和CSS有时让我大吃一惊. 带边框的DIV显示元素及其内容的完整高度的背景颜色.为什么没有边界,DIV会假设(反向继承？)其孩子的边缘？ 作为一个例子,这里是一个JSFiddle,说明有和没有边框的行为. http://jsfiddle.net/ahNUX http://jsfiddle.net/ahNUX/1/ 有没有人关心如何解释这是一个“功能”而不是某种错误？ 更新：向父级添加1px HTML和CSS有时让我大吃一惊.

带边框的div显示元素及其内容的完整高度的背景颜色.为什么没有边界,div会假设(反向继承？)其孩子的边缘？

作为一个例子,这里是一个Jsfiddle,说明有和没有边框的行为.

http://jsfiddle.net/ahNUX

http://jsfiddle.net/ahNUX/1/

有没有人关心如何解释这是一个“功能”而不是某种错误？

更新：向父级添加1px填充是一个快速修复.

解决方法 当然.在CSS中,默认情况下,相邻的顶部和底部边距相互重叠.在相邻的兄弟选择器()被认为/得到良好支持之前,这是一个合理的解决方法,因为这意味着如果你写了h2 {margin-top：3em;},你的h2s上面就会有3到3个空间.如果前面有一个段落,下边距为1em.

在第二个示例中,因为< div>没有任何顶部或底部填充或边框,其顶部和底部边距与< h1>的默认顶部和底部边距相邻.即使< div>的边距没有任何高度,它们仍然被视为存在,因此< h1>的边距必须重叠它们.由于< div>的边距在< div>的背景颜色区域之外,因此< h1>的边距也必须位于外部.

在您的第一个示例中,因为< div>有边框,其边距不再与< h1>的边距相邻,因此不会发生重叠.您可以通过向< div>：http://jsfiddle.net/ahNUX/7/添加顶部和底部填充来获得相同的效果

(我不确定你对< div>“反向继承”它的孩子的填充意味着什么.在你的例子中,< div>和< h1>都没有任何填充.< div内的空间;第一个示例中的div>是由< h1>的上下边距创建的.)

总结

以上是内存溢出为你收集整理的HTML – Box模型有什么用？儿童保证金影响父母全部内容，希望文章能够帮你解决HTML – Box模型有什么用？儿童保证金影响父母所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。