添加边框“下推”内容[重复]

Posted 2023-03-06

【中文标题】添加边框“下推”内容[重复]

【英文标题】：Adding a border "pushes down" contents [duplicate]

【发布时间】：2018-08-02 22:20:27

【问题描述】：

我有一个 p 元素，其中一个 div 元素内有一段文本。 div 元素上没有边框，p 元素位于左上角，但如果我为 div 元素添加边框，它会从顶部边缘（而不是左边缘）“下推”段落。

为什么会发生这种情况？有没有办法防止这种情况发生？

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;

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

【问题讨论】：

可能与您的问题无关，但很高兴知道只能使用一个样式命令创建边框：border: 2px solid black;。

见Margin on child element moves parent element。

@Luicy，谢谢你；目前，当我学习新概念时，我正在尝试以扩展的方式将它们写出来，并尝试强化它们。

【参考方案1】：

更新：

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

---

p 标记被下推的原因是 ma​​rgin collapsing（或者说，当您设置边框时，margin 没有折叠）。

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;

【讨论】：

这是完美的。我只想到兄弟姐妹之间的边距折叠，而不是父母和孩子之间的一种“重叠”。非常感谢。

【参考方案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。