Question

我有一个有多个孩子的父div。我希望孩子们在彼此之间有间距，所以我给他们边距。这个边缘显然（但不合需要地）也在父母和孩子之间引入了空间。什么是摆脱孩子和父母之间空间的最干净的方法？

如果我不必担心调整大小或动态数量的孩子，我可以单独设置选择性边距为0以达到结果，但这很麻烦。

这似乎应该是一项常见的任务，所以我希望我有一个简单的css属性，我不知道。

这是我上面描述的情况的一个例子。

＆＃13;

.parent {
  height:100%;
  width:100%;
  display: flex;
  font-size: 0;
  flex-wrap:wrap;
  border: 1px solid black;
}


.child {
  display: inline-block;
  background:blue;
  margin:0 12px 0;
  flex-grow: 0;
  width:100px;
  height:100px;
  margin:10px;
}

＆＃13;

<body>
<div class="parent">
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
</div>
</body>

＆＃13;

Answer 1

我会将子包装在一个容器中并指定margin:-10px来展开包装器以便偏移边框。

我还会在.parent上添加overflow: hidden，这样包装器实际上不会比其父包大，以避免DOM并发症。

    .parent {
        height:100%;
        width:100%;
        font-size: 0;
        border: 1px solid black;
        overflow: hidden;
    }
    .wrapper {
        display: flex;
        flex-wrap: wrap;
        margin: -10px;
    }
    .child {
        display: inline-block;
        background:blue;
        flex-grow: 0;
        width:100px;
        height:100px;
        margin:10px;
    }

    <div class="parent">
        <div class="wrapper">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>

Answer 2

您可以将保证金添加为top right bottom left，根据您的需要使用它，下面给出了示例

＆＃13;

.parent {
  height:400px;
  width:400px;
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  border: 1px solid black;
}


.child {
  display: inline-block;
  background:blue;
  margin:0 10px 0 0;
  flex-grow: 0;
  width:50px;
}

＆＃13;

<body>
<div class="parent">
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
 
</div>
</body>

＆＃13;

如何避免儿童和父母div之间的利润？

2 个答案: