html - 你能控制或定位包装元素的样式吗？

Question

考虑以下示例，我在一个容器元素中有多个 inline-block 元素，这些元素的宽度可能会缩小到其中的元素将被包裹的程度。

我希望每个“行”或包含的元素之间有一点空间。使用 margin-top 或 margin-bottom 我得到了我想要的空间。但是，元素的第一行或最后一行都有一点空间。

有没有办法定位换行元素而不是第一行？

#container {
  width: 10em;
  background-color: blue;
}
#container > span {
  display: inline-block;
  padding: 0.25em;
  margin: 0;
  background-color: lightblue;
}
#container > span:not(:last-child) {
  margin-right: 0.25em;
}
/*The following rule doesn't exist*/

#container > span:not(:first-row) {
  margin-top: 0.25em;
}

<div id="container">
  <span>some</span><span>text</span><span>of</span><span>some</span><span>elements</span><span>that</span><span>should</span><span>wrap</span>
</div>

Answer 1

Is there a way to target the line wrapped elements but not the first line?

不，现在还没有。

However, there is a small bit of space either on the first or last row of elements.

在大多数情况下，您应该能够通过容器元素的负边距来缓解这种情况，如下所示:

#container {
  width: 10em;
  margin-bottom: -0.25em;
  background-color: blue;
}
#container > span {
  display: inline-block;
  padding: 0.25em;
  margin: 0 0 .25em 0;
  background-color: lightblue;
}
#container > span:not(:last-child) {
  margin-right: 0.25em;
}

.test { background:red; }

<div id="container">
  <span>some</span><span>text</span><span>of</span><span>some</span><span>elements</span><span>that</span><span>should</span><span>wrap</span>
</div>
<div class="test">I am where I should be.</div>

(添加了红色 div 以表明它与前一个元素之间没有偏移量。)