Question

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我对css很新。根据我的假设，我的input[type="search"]应该在div.container的边框上有10px的边距，因为我已在margin上设置了div.search，但正如您在代码中看到的那样上面的代码段，我的input元素和div.container正在共享边框。

你能否详细说明我所缺少的东西让它发挥作用？我特别感兴趣的是看到我推理中的缺陷。

Answer 1

TL; DR

.search {
  display: inline-block;
}

说明

.container和.search之间的边距会根据有关父元素和子元素的边距折叠规则而崩溃。

摘自MDN page：

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

如果没有边框，填充，内联部分，块格式化上下文创建，或者将块的边缘顶部与其第一个子块的边缘顶部分开;或者没有边框，填充，内联内容，高度，最小高度或最大高度来将块的边距底部与其最后一个子节点的边距底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

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

在行动中

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

保证金不适用于儿童div

1 个答案:

TL; DR

说明

在行动中