css：如何在垂直 div 之间创建间隙，仅使用一个 css 指令

Question

如何仅使用一个 css 指令在唯一的相邻块之间创建垂直间隙，而不是在父元素之间创建垂直间隙。

<div>BLOCK1</div>
<div>
<!-- vertical gap disabled -->
<div>BLOCK2.1</div>
<!-- vertical gap enabled -->
<div>BLOCK2.2</div>
<!-- vertical gap enabled -->
<div>BLOCK2.3</div>
<!-- vertical gap disabled -->
</div>
<div>BLOCK3</div>

margin-bottom（或 margin-top）- 不正确的结果（对于 margin-bottom，BLOCK2.3 和 BLOCK3 之间的垂直间隙或对于 margin-top，BLOCK1 和 BLOCK2.1 之间的垂直间隙）

Answer 1

您可以使用直接子选择器 > 请参阅：https://www.w3.org/TR/selectors/#child-combinators

从您的代码来看，它可能以这种方式使用：

body>div {margin:1em 0;}

<div>BLOCK1</div>
<div>
  <!-- vertical gap disabled -->
  <div>BLOCK2.1</div>
  <!-- vertical gap enabled -->
  <div>BLOCK2.2</div>
  <!-- vertical gap enabled -->
  <div>BLOCK2.3</div>
  <!-- vertical gap disabled -->
</div>
<div>BLOCK3</div>

css：如何在垂直 div 之间创建间隙，仅使用一个 css 指令

css: how to create gap between vertical divs, using only one css instruction

html

css

position

space