CSS Adjacent Paragraph Spacing

Adjusting the spacing of layout content can at times get very tricky. Consider the following layout:

Porttitor eget dolor morbi non arcu risus quis. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Placerat duis ultricies lacus sed turpis. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Mattis rhonc

reet non curabitur gravida. Sit amet porttitor eget dolor morbi non arcu risus quis. Neque ornare aenean euismod elementum nisi quis. Pharetra pharetra massa massa ultricies mi quis hendrerit. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Elit duis tristique sollicitudin nibh sit amet. Sed blandit libero v

Let's assume we need to target the spacing between the paragraphs. The first choice usually tends to be applying top/bottom margins to <p> tags. Let’s see how top-margin affects the results.

p {
 margin-top: 60px;
}

Our spacing issue is solved but as a side-effect, we have the problem of undesired top margin for the first paragraph. If we use the bottom margin, the same undesired spacing will occur at the bottom of the last paragraph.

p {
 margin-bottom: 60px;
}

What we need to achieve the right solution, is the targeting of only the adjacent paragraphs.

Adding Space Between Adjacent Paragraphs

CSS offers very powerful targeting in the form of combinators. One instance of it is Adjacent Sibling Combinator. It is represented by + character and takes two selectors as follows:


div + span {}

The above rule targets all <span> tags which come immediately after a <div> tag. In the following DOM, this rule will target the <span> tags with IDs 2 and 6, but not the one with ID 4 as it does not immediately follow a <div> tag.


<div id=”1”><div>
<span id=”2”><span>
<p id=”3”><p>
<span id=”4”><span>
<div id=”5”><div>
<span id=”6”><span>

Note that this rule does not target the <div> or the <p> tags.

Codepen to follow demonstrates a similar layout. The DOM Structure is as follows:

<p>
<p>
<h3>
<p>
<p>
<span>
<button>

We have the following style rule

.parent p + p {
  margin-top: 20px;
}

This rule will target all those <p> tags that are the adjacent siblings of another <p> tag. In the DOM structure outlined above, only the 2nd and 4th <p> tags qualify for this rule. In the codepen, increase or decrease the margin-top value in this rule and notice the effect. Only the mentioned <p> tags have their top margin updated, while the rest of the <p> tags continue to remain in their place. This targeting is very useful in setting/debugging spacing of content-intensive documents such as essays, research papers, or blog articles.

We can also control these styles in response to design state updates of other elements. For example, consider we need to control spacing through a radio button group as follows:

10px 20px 30px 40px

Let’s build it. We need a group of radio buttons specifying a spacing value to select from. When a specific button is checked, the corresponding value is applied as spacing to adjacent <p> tags.


<label for="spacing-1">10px</label>
<input name="spacing" type="radio" id="spacing-1" checked>
<label for="spacing-2">20px</label>
<input name="spacing" type="radio" id="spacing-2">
<label for="spacing-3">30px</label>
<input name="spacing" type="radio" id="spacing-3">
<label for="spacing-4">40px</label>
<input name="spacing" type="radio" id="spacing-4">
<div id="parent" class="parent">

We have our group of radio buttons. Let’s write a rule that is activated by the checked states of the radio button.

#spacing-1:checked {
}

We have the rule. All we need to do now is take all the <p> tags that are a general sibling of our spacing control element and apply margin to those that are immediately adjacent siblings of another <p> tag. For targeting the general (any sibling be it adjacent or not), we use the ~ combinator.

#spacing-1:checked ~ p + p {
 margin-top: 10px;
}

Following codepen demonstrates both the approaches we have discussed so far.

<label for="spacing-1">10px</label>
<input name="spacing" type="radio" id="spacing-1" checked>
<label for="spacing-2">20px</label>
<input name="spacing" type="radio" id="spacing-2">
<label for="spacing-3">30px</label>
<input name="spacing" type="radio" id="spacing-3">
<label for="spacing-4">40px</label>
<input name="spacing" type="radio" id="spacing-4">
<div id="parent" class="parent">
  <button>No extra spacing before paragraphs</button>
  
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis ullamcorper velit sed ullamcorper. Dictumst quisque sagittis purus sit. Aliquam ut porttitor leo a diam sollicitudin tempor. Est ante in nibh mauris cursus mattis molestie a. Facilisi nullam vehicula ipsum a arcu cursus. At quis risus sed vulputate odio ut enim blandit. Blandit volutpat maecenas volutpat blandit aliquam etiam. Eget arcu dictum varius duis at consectetur lorem donec massa. Porttitor massa id neque aliquam vestibulum morbi blandit cursus
  </p>
  
  <p>
   Egestas sed tempus urna et pharetra pharetra. Bibendum enim facilisis gravida neque convallis a cras. Pretium vulputate sapien nec sagittis. Ut lectus arcu bibendum at varius vel. Sem integer vitae justo eget. Non enim praesent elementum facilisis leo vel. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Sit amet nisl purus in mollis nunc. Nunc scelerisque viverra mauris in aliquam sem. Rutrum quisque non tellus orci ac auctor augue mauris augue. Ullamcorper a lacus vestibulum sed arcu non odio. Laoreet non curabitur gravida arcu ac. 
  </p>
  
  <h3>Heading - No extra spacing here</h3>
  <p>
    Aliquet nec ullamcorper sit amet risus nullam eget. In aliquam sem fringilla ut morbi. In ante metus dictum at tempor commodo ullamcorper a lacus. Egestas diam in arcu cursus euismod quis viverra. Ipsum faucibus vitae aliquet nec ullamcorper. Vivamus at augue eget arcu dictum. Turpis egestas pretium aenean pharetra magna ac placerat. Nisl condimentum id venenatis a.
  </p>
  
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis ullamcorper velit sed ullamcorper. Dictumst quisque sagittis purus sit. Aliquam ut porttitor leo a diam sollicitudin tempor. Est ante in nibh mauris cursus mattis molestie a. Facilisi nullam vehicula ipsum a arcu cursus. At quis risus sed vulputate odio ut enim blandit. Blandit volutpat maecenas volutpat blandit aliquam etiam. Eget arcu dictum varius duis at consectetur lorem donec massa. Porttitor massa id neque aliquam vestibulum morbi blandit cursus
  </p>
  
  <button>No extra spacing after paragraphs</button>
</div>

/* Spotlight: Adjacent Siblings Styling */

p + p {
  margin-top: 10px;
}

#spacing-2:checked ~ .parent p + p {
  margin-top: 20px;
}

#spacing-3:checked ~ .parent p + p {
  margin-top: 30px;
}

#spacing-4:checked ~ .parent p + p {
  margin-top: 40px;
}

/* Content Styling */
* {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

body {
  text-align: center;
  padding: 10px;
}

label:not(:first-child) {
  margin-left: 20px;
}

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

p {
  max-width: 35em;
  text-align: justify;
  font-size: 18px;
}

button {
  padding: 10px;
  color: white;
  background-color: #48abe0;
  border: none;
  border-radius: 7px;
  margin-top: 10px;
  cursor: pointer;
}

h3 {
  margin-top: 30px;
  margin-bottom: 0;
}

Conclusion

Adjacent Sibling Selection is a very powerful feature that CSS offers. It allows us to target only those elements that are immediately adjacent siblings to a specific selector. For content-intensive layouts, it helps easily maintain the content spacing.