stack stack - 2 years ago 80
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.

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download