我该如何无国界儿童？

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中设置边距：0，在部分中设置边距：0

如果您仍然想要“内部”填充，则可以在> div中设置margin-bottom：5px，也可以选择> div：last-child {margin-bottom：0}。

Answer 2

在这里，您可以考虑元素的负边距。诀窍是应用等于-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>

Answer 3

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

将确保所有将靠着容器，但彼此相距20px的孩子。