Question

当我将div设置为margin时，在Safari / Chrome / Firefox中预览50px时，为什么无法看到上边距和下边距。

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>

Answer 1

此行为正常，如CSS box model：

中所述

8.3.1折叠边距

在本规范中，表达式折叠边距意味着两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有填充或边界区域将它们分开）组合形成单个边距。

在CSS2中，水平边距永远不会崩溃。

垂直边距可能会在某些框之间崩溃：

正常流动中的两个或多个相邻的块箱垂直边缘坍塌。   得到的边距宽度是相邻边距宽度的最大值。   在负边距的情况下，   负相邻边界的绝对最大值从中扣除   正邻接边距的最大值。   如果没有正边际，   负相邻边的绝对最大值从零中扣除。   浮动框和任何其他框之间的垂直边距不会折叠。   绝对和相对定位的盒子的边缘不会崩溃。

要实现您的目标，您必须将顶部和底部填充设置为父元素，即您的div中的div。

Answer 2

我认为你在寻找的是：

<div style="width:400px;background-color:#ffffaa;padding:50px">
  <p style="background-color:#aaffff;
            padding:20px;
            border-style:solid;
            border-width:5px;
            border-color:#000000;
            display:block;"> Text goes here ……… 
  </p>
</div>

Answer 3

如果你向你的div添加一个内容（假设有一个 的空格），它就可以解决问题。

<div style="width:400px;background-color:#ffffaa">&nbsp;
  <p style="background-color:#aaffff;
        padding:20px;
        margin:50px;
        border-style:solid;
        border-width:5px;
        border-color:#000000;"> Text goes here ……… 
  </p>
</div>

但你是对的，很奇怪。

的问候，晏

为什么我无法在浏览器中看到上/下边距

3 个答案: