Margin bottom has no effect on inline elements

This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the CSS-and-design category.

Last Updated: 2024-11-23

I was trying to get a margin-bottom on the following element and failing:

<p>
  <a class="m-bottom" src="http://exampe.com">
  Text
  </a>
</p>

Here was my CSS:

.m-bottom {
  margin-bottom: 1.2em;
}

The reason it didn't work is because only block elements get margin-bottom, of which a elements are not.

Therefore the fix:

.m-bottom {
  margin-bottom: 1.2em;
  display: inline-block;
}