css: как создать разрыв между вертикальными divs, используя только одну команду 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> 

край дно (или рентабельность-топ) - неверный результат (вертикальный зазор между 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>