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） - 不正确的结果（BLOCK2.3和BLOCK3之间的边距底部之间或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：如何仅使用一条css指令在垂直div之间创建间隙

1 个答案: