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-04-25
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;
}