<分区>
<分区>
当我将 margin 设置为 50px 时，为什么在 Safari/Chrome/Firefox 中预览 。div 时看不到顶部和底部边距
HTML:
<div style="width:400px;background-color:#ffffaa">
<p style="background-color:#aaffff;
padding:20px;
margin:50px;
border-style:solid;
border-width:5px;
border-color:#000000;"> Text goes here ………
</p>
</div>
最佳答案
此行为在 CSS box model 中指定是正常的:
8.3.1 Collapsing margins
In this specification, the expression collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
In CSS2, horizontal margins never collapse.
Vertical margins may collapse between certain boxes:
Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero. Vertical margins between a floated box and any other box do not collapse. Margins of absolutely and relatively positioned boxes do not collapse.
要实现您的目标，您必须为父元素(在您的例子中为 div)设置顶部和底部填充。
关于html - 为什么我在浏览器中看不到顶部/底部边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23677471/