Question

我有一个p元素，在div元素中有一段文字。在div元素上没有边框的情况下，p元素位于左上角，但是如果我向div元素添加一个边框，它就会向下按下＆＃34;从上边缘开始的段落（不是左边缘）。

为什么会出现这种情况？是否有防止这种情况的方法？

＆＃13;

html,
body {
  height: 100%;
}

div {
  min-width: 300px;
  max-width: 500px;
  min-height: 200px;
  max-height: 450px;
  height: 100%;
  background-color: Pink;
}

div.first {
  border-width: 2px;
  border-style: solid;
  border-color: Black;
}

p {
  width: 75%;
  height: 75%;
  background-color: Black;
  color: White;
}

＆＃13;

<div class="first">
  <p class="one">Paragraph one text...</p>
</div>
<div class="second">
  <p class="two">Paragraph two text...</p>
</div>

＆＃13;

Answer 1

更新

您可以通过将margin: 0;添加到p代码的样式来阻止此移动。请参阅下文，了解如何以及为何发生这种情况。

推送p标记的原因是边距折叠（或者，设置边框时边距不会折叠）。

See this page for a more in-depth explanation of how it works。从该页面：

块的顶部和底部边距有时会合并（折叠）为单个边距，其大小是单个边距中的最大边（或者只有其中一个，如果它们相等），这种行为称为边距折叠。请注意，浮动和绝对定位元素的边距永远不会崩溃。

基本上，当您没有边框设置时，您的边距会被浏览器折叠 ，尚未计算 当您设置该边框时。

有关阻止浏览器折叠边距的方法，see this question。从那个问题（第一部分最初引自this other question）：


在DIV中具有边距的子元素中找到替代方法您还可以添加：

.parent { overflow: auto; }

或：

.parent { overflow: hidden; }

这可以防止边距崩溃。边框和填充也是如此。因此，您还可以使用以下内容来防止上边距崩溃：

.parent { padding-top: 1px; margin-top: -1px; }

Answer 2

这与margin collapse有关 <p>元素上的边距与其父元素一起折叠。

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

请注意：

相邻的垂直边距会崩溃...当且仅当...没有线框，没有间隙，没有填充和没有边框将它们分开。

为了防止两个示例中的边距崩溃，您可以使用border以外的方法。例如，overflow:auto：

建立新的块格式化上下文的元素的边距（例如浮点数和'溢出'而不是'可见'的元素）不会因其流入的子节点而崩溃。

html,
body {
  height: 100%;
}

div {
  min-width: 300px;
  max-width: 500px;
  min-height: 200px;
  max-height: 450px;
  height: 100%;
  background-color: Pink;
  overflow: auto;
  margin: 0 0 1em;
}

div.first {
  border-width: 2px;
  border-style: solid;
  border-color: Black;
}

p {
  width: 75%;
  height: 75%;
  background-color: Black;
  color: White;
}

<div class="first">
  <p class="one">Paragraph one text...</p>
</div>
<div class="second">
  <p class="two">Paragraph two text...</p>
</div>

另见：
Mastering margin collapsing。
What You Should Know About Collapsing Margins

添加边框＆＃34;按下＆＃34;内容

2 个答案:

更新