Any problems with using a pseudo-element to space paragraphs with CSS?

Question

What I have done most of the time to space paragraphs (or paragraphs and other elements) is to use the ::before tag. For example

p + p::before {
  content: '';
  display: block;
  margin: 20px 0;
}

That way, I can be really specific about my whitespace. For example, I could also do this

h1 + p::before {
  content: '';
  display: block;
  margin: 10px 0;
}

That way I know how the space between each element behaves.

Is this good practice?

On most places I have read that margins and padding should be used exclusively, but I found that I depend too much on id selectors when using them.

On the same topic, if I were to use them, should I use margin or paddings? On some places I have read that margins are prefered, yet on others that padding should be used for typography. By typography I refer to the main body of text: titles, paragraphs, and everything it may contain.

Of course, I would like to avoid <div>s on my HTML code, trying to keep it as semantic as possible.

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Is this good practice?

No, not really. That's sacrificing valuable pseudo-elements that could be used for generated content or other clever layout tricks (every element can only have one ::before pseudo-element at a time), to do something that can be done conventionally with margins on the elements themselves.

The typical practice for spacing paragraphs is to specify vertical margins on each paragraph and allow margin collapsing to do the rest:

p {
  margin: 20px 0;
}

... because this is what margin collapsing was designed for: so authors can say, "There should be 20px of space between paragraphs", without them having to calculate how much margin each paragraph should have on either end. In other words, this is how CSS implements the concept of paragraph spacing as seen in word processors.

If you don't want this behavior, you need only specify either a top or bottom margin, and change the value of that top or bottom margin wherever it needs to differ. For example:

p {
  margin: 20px 0 0 0; /* Equivalent to margin: 0; margin-top: 20px; */
}

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

Using pseudo-elements for this is unnecessary.

On most places I have read that margins and padding should be used exclusively, but I found that I depend too much on id selectors when using them.

On the same topic, if I were to use them, should I use margin or paddings? On some places I have read that margins are prefered, yet on others that padding should be used for typography.

This is too broad to answer concisely, but I will say that margins and padding can be used together in some situations as they serve different purposes in layout.

That being said, whenever you find yourself wondering if you should use one or the other, as a starting point consider what they were designed for: margins create space outside an element (that can interact with other margins in various ways); padding creates space inside an element to give its children breathing room away from its content edge. Again, there are a number of situations where it's not so simple, but unfortunately it would be too broad to cover in one answer.

It's not clear to me what that hearsay refers to by "typography".

Well, now I understand the reasoning behind collapsing margins. If I were to add an element in between paragraphs, but I want LESS space in between, is it okay to use negative margins? Or that would lead to bad code? — Ian Fieldhouse, Jun 28 '18 at 10:43
@Ian Fieldhouse: I think that's fine. Alternatively, if you use top margins (i.e. you eschew collapsing margins), you can specify smaller top margins for that element and the p that follows it (in one CSS rule) without needing to resort to negative margins. — BoltClock, Jun 28 '18 at 11:52

score 1 · Answer 2 · answered Jun 28 '18 at 04:05

Using margins and padding in tandem under CSS would allow you to have more freedom of how much white space you want between your elements or borders. Use padding to determine how much space u want in between elements within a closed border such as div or a table, etc. When you want to deal with white space involving elements that aren't restricted to borders or a certain boundary, use margin. Both margin and padding allow you to determine how much space you want to the right, left, top, and bottom of the element of your choosing.

Any problems with using a pseudo-element to space paragraphs with CSS?

2 Answers2