边距在删除边框时崩溃答案

【问题标题】：Margin is collapsing on removing border边距在删除边框时崩溃
【发布时间】：2017-04-09 09:58:16
【问题描述】：

场景

我在引导网格中创建并放置了一个 DIV。我正在对齐 DIV 内的 4 个项目，即。

页眉（相对，100% 宽度）
段落（绝对 - 左下）
段落（绝对 - 右下）
背景（绝对 - 100% 宽度，4rem 高度，底部）

Demo

问题

当我从 DIV 中删除边框（CSS - 第 118 行）时，(1) 的边距折叠为 (2) 和 (3) 的边距，（或者看起来就是这样。）可能是什么问题？

注意

我无法为 DIV 分配固定高度，因为当标题中有更多内容时，我需要扩展 DIV，如在第三个 DIV 中可见。

【问题讨论】：

标签： css

【解决方案1】：

似乎在没有border 的情况下工作，但在“.content”上使用display: flex，在“.title”类上使用width: 100%。您还可以在“.content-border-js”和“.content-border-css”上将border 替换为outline，以避免当您将鼠标悬停在其中一个上时移动兄弟元素。

.content{
  position: relative;
  z-index: 1;
  display: flex;
  margin: 1rem auto;
  max-width: 25rem;
  background-color: white;
  /*border: 1px solid transparent;*/
  box-shadow: 2px 2px 2px #bbb;
  transition: border 100ms ease;
}

.content .title{
  text-align: center;
  width: 100%;
  font-size: 1.3rem;
  margin: 3rem 1rem 8rem;
}

.content-border-js{
  outline: 1px solid #f3df49;
}
.content-border-css{
  oultine: 1px solid #33a9dc;
}

编辑：没有 FLEXBOX

确定没有 flexbox 的另一个解决方案：

在“.content-border-js”和“.content-border-css”上设置outline。然后在“.content”类上使用overflow: auto。

.content{
  position: relative;
  z-index: 1;
  margin: 1rem auto;
  overflow: auto;
  max-width: 25rem;
  background-color: white;
  /*border: 1px solid transparent;*/
  box-shadow: 2px 2px 2px #bbb;
  transition: border 100ms ease;
}

.content-border-js{
  outline: 1px solid #f3df49;
}
.content-border-css{
  oultine: 1px solid #33a9dc;
}

【讨论】：

嘿，de jaune，谢谢你的建议。不幸的是，我不能使用 flexbox，因为我还必须支持旧版浏览器。我非常感谢你的努力:)
不客气！但我很顽强，我有另一个解决方案给你；）我编辑了我的答案。告诉我你是否可以。
你……先生……太棒了！！！ :) 我将此标记为正确答案。但是，如果可能的话，请告诉我如何只添加溢出来解决这个巨大的问题：p 再次感谢大家。