stack stack - 6 months ago 7
HTML Question

How to remove top margin when element is empty?

Here is my HTML structure:

p {
margin: 0;
border: 1px solid;
small {
display: block;
margin-top: 40px;
border: 1px solid #999;
small + span {
display: block;
border: 1px solid #ccc;


All fine. Sometimes
element is empty. Something like this:


In this case, I want to remove the

Is that possible using pure CSS? It should be noted I don't want to use JS.


You could try using a combination of :not and :empty pseudo-classes.

small:not(:empty) {
  margin-top: 40px;

The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector. -MDN

The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not. -MDN