html – 为什么我需要这些div的边框才能正确渲染？

概述我有一块看起来像这样的代码： <div class="header"></div><div class="right-gradient"> <div class="left-gradient"> @RenderBody() </div></div>.right-gradient{ background: url('Images/RightGrad 我有一块看起来像这样的代码：

<div ></div><div >    <div >        @RenderBody()    </div></div>.right-gradIEnt{    background: url('Images/RightGradIEnt.png') repeat-y right top transparent;}.left-gradIEnt{    background: url('Images/RightGradIEnt.png') repeat-y left top transparent;}

它应该导致这样的事情：

|-------------------||##### header ######||-------------------||//               \||//    Content    \||//               \||//               \|---------------------

但是它改为：

|-------------------||##### header ######||-------------------||                   |  - Note the extra space here|//               \||//    Content    \||//               \||//               \|---------------------

在试图弄清楚标题和内容之间的额外空间来自何处时,我发现向我的div添加边框实际上可以纠正问题并消除标题和内容之间的有问题的空间.

.right-gradIEnt{    background: url('Images/RightGradIEnt.png') repeat-y right top transparent;    border: 1px red solID;}.left-gradIEnt{    background: url('Images/RightGradIEnt.png') repeat-y left top transparent;    border: 1px blue solID;}

为什么是这样？

jsfiddle with sample code reproducing the problem

解决方法 简而言之,您的利润已经崩溃. MDN对此现象有一个解释：

If there is no border,padding,inline content,or clearance to separate the margin-top of a block with the margin-top of its first child block,or no border,height,min-height,or max-height to separate the margin-bottom of a block with the margin-bottom of its last child,then those margins collapse. The collapsed margin ends up outsIDe the parent.

资料来源：https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing

总结

以上是内存溢出为你收集整理的html – 为什么我需要这些div的边框才能正确渲染？全部内容，希望文章能够帮你解决html – 为什么我需要这些div的边框才能正确渲染？所遇到的程序开发问题。

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