如何在没有边界的情况下分隔孩子？

Question

https://codepen.io/tobq/pen/BEVedj

我在一个容器中有这些可变宽度、溢出的孩子。

如果没有子元素和容器之间的外部间距，如何获得内部间距？

使用 grid-gap 会导致这种行为：

https://codepen.io/tobq/pen/xezNKY

适当的间隙，但现在固定宽度、对齐、单元格 - 这不是我想要的。

我想做的是使用负边距来掩盖这个间距，但这似乎很老套

https://codepen.io/tobq/pen/EJRzQp

并且有很多副作用，例如身体周围的蓝色边框不再可见。它还在渲染所有额外的空间，它只需要被带有overflow: hidden、https://codepen.io/tobq/pen/jRKoKw 的另一个容器剪掉。

使用first/last-child 选择器来删除填充不起作用，因为每行有多个元素。因此，例如，删除最终元素 margin-bottom 不会删除底部边框，因为在具有 margin-bottom 的行上还有其他元素。没有办法——据我所知——选择最后一行的所有元素。

Answer 1

我不确定您要在这里完成什么，但您可以尝试在 > div 中设置 margin: 0，并在 section 中设置 padding: 0

如果你仍然想要'inner' padding，你可以在 > div 中设置 margin-bottom: 5px，并且选择 > div:last-child { margin-bottom: 0 } 也可以。

Answer 2

.container {
  margin: -10px;
}
.child {
  margin: 10px;
}

将确保所有将靠在容器上的孩子，但彼此相距 20 像素。

Answer 3

这是一个可以考虑元素负边距的想法。诀窍是应用等于-X 的上边距和等于2*X 的下边距，以便在元素之间最后有X 并且顶部没有空间（左右相同的逻辑）。然后在主容器上添加填充以纠正第一个元素的负边距。

最后一行会有一个小问题，因为您将拥有2*X 边距。要修复它，您可以将背景尺寸减小2*X 并添加一个负边距底部也等于2*X（右侧的逻辑相同。

body {
  border: 3px solid blue;
  overflow-x:hidden; /*to avoid overflow due to negative margin-right*/
}

section {
  background: 
    linear-gradient(red,red) top left/calc(100% - 10px) calc(100% - 10px) no-repeat;
  font-size:0;
  padding-left:5px;
  padding-top:5px;
  margin-bottom: -10px;
  margin-right: -10px;
}

section>div {
  display: inline-block;
  font-size:initial;
  background: yellow;
  padding: 10px;
  margin: -5px 10px 10px -5px;
}

<section>
  <div>word</div>
  <div>word word</div>
  <div>word word word</div>
  <div>word word</div>
  <div>word</div>
  <div>word</div>
  <div>word word word word</div>
  <div>word word</div>
  <div>word</div>
  <div>word</div>
  <div>word word word</div>
  <div>word</div>
  <div>word word</div>
  <div>word word word word word word word word</div>
</section>

另一个想法是使用轮廓和伪元素来模拟空间：

body {
  border: 3px solid blue;
}

section {
  background:red;
  font-size:0;
  overflow:hidden;
}

section>div {
  display: inline-block;
  font-size:initial;
  background: yellow;
  padding: 10px 15px 15px 10px;
  outline:5px solid red;
  position:relative;
}
section>div:after {
  content:"";
  position:absolute;
  top:-5px;
  bottom:0;
  left:100%;
  width:100vw;
  background:red;
}

<section>
  <div>word</div>
  <div>word word</div>
  <div>word word word</div>
  <div>word word</div>
  <div>word</div>
  <div>word</div>
  <div>word word word word</div>
  <div>word word</div>
  <div>word</div>
  <div>word</div>
  <div>word word word</div>
  <div>word</div>
  <div>word word</div>
  <div>word word word word word word word word</div>
</section>