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

Question

How to create a vertical gap between the only neighboring blocks, but not between the parent elements, using only one css instruction.

<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 (or margin-top) - incorrect result (vertical gap between BLOCK2.3 and BLOCK3 for margin-bottom or between BLOCK1 and BLOCK2.1 for margin-top)

Answer 1

you may use the direct child selector > see: https://www.w3.org/TR/selectors/#child-combinators

from your bit of code it might be used this way:

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>