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

发布时间：2020-12-14 18:27:27 所属栏目：资源来源：网络整理

导读：HTML和CSS有时让我大吃一惊. 带边框的DIV显示元素及其内容的完整高度的背景颜色.为什么没有边界,DIV会假设(反向继承？)其孩子的边缘？作为一个例子,这里是一个JSFiddle,说明有和没有边框的行为. http://jsfiddle.net/ahNUX http://jsfiddle.net/ahNUX/1/ 有

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>的上下边距创建的.)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!