边距不适用于子 div答案

【问题标题】：Margin is not applied on child div边距不适用于子 div
【发布时间】：2018-01-17 07:07:48
【问题描述】：

.search {
  margin: 10px;
}

.search::before {
  content: "";
  position: absolute;
  top: 50%;
  bottom: auto;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: url('magnifying-glass.svg');
}

input[type="search"] {
  height: 30px;
  padding-left: 30px;
  border: none;
  border-radius: 0.25rem;
  outline: none;
}

.container {
  position: relative;
  background-color: cadetblue;
}

<div class="container">
  <div class="search">
    <form>
      <input type="search" placeholder="Search...">
    </form>
  </div>
</div>

我对 css 还很陌生。根据我的假设，我的input[type="search"] 与div.container 的边界应该有10px 的边距，因为我在div.search 上设置了margin，但是，正如您在上面的代码sn-p 中看到的，我的@987654329 @element 和 div.container 共享边界。

您能否详细说明我缺少什么才能使其正常工作？我特别有兴趣看到我推理中的缺陷。

【问题讨论】：

搜索 collapsing-margin
CSS margin terror; Margin adds space outside parent element的可能重复
stackoverflow.com/questions/685967/…

标签： css margin

【解决方案1】：

TL;DR

.search {
  display: inline-block;
}

说明

.container 和 .search 之间的边距折叠，基于对父元素和子元素有效的边距折叠规则。

摘自相关MDN page：

父母和第一个/最后一个孩子

如果没有边框、内边距、内联部分、创建的块格式上下文或将块的上边距与其第一个子块的上边距分开的间隙；或者没有边框、填充、内联内容、高度、最小高度或最大高度来将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

基于此，您可以通过创建新的block formatting 上下文来防止折叠边距。这可以通过例如在子元素上设置display: inline-block。

在行动

.search {
    display: inline-block;
    margin: 10px 10px 10px 10px;
}

.search::before {
    content: "";
    position: absolute;
    top: 50%;
    bottom:auto;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background: url('magnifying-glass.svg');
}

input[type="search"] {
    height: 30px;
    padding-left: 30px;
    border: none;
    border-radius: 0.25rem;
    outline: none;
}

.container {
    position: relative;
    background-color: cadetblue;
}

<html>
    <head>
        <title>Test HTML and CSS</title>
        <script src="main.js"></script>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div class="container">
            <div class="search">
                <form>
                    <input type="search" placeholder="Search..."/>
                </form>
            </div>
        </div>
    </body>
</html>

【讨论】：