Question

I have a problem with margin-top/bottom on <a> elements – it doesn’t seem to work.

This is the HTML code:

<div class="pages-link">
     <a href="#">1</a>
     <a href="#">2</a>
     <a href="#">3</a>
     ....
</div>

This is the CSS code:

.pages-link {
     margin:2em 0;
     word-spacing:.25em;
}

.pages-link a {
     background:#d7d7d7;
     border:1px solid #ccc;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
     -khtml-border-radius:3px;
     border-radius:3px;
     color:#333;
     padding:.3em .5em;
     text-decoration:none;
}

This is how the final result looks like. The problem is obvious, I want 5 or 10px of margin-bottom for the <a> elements, but the property doesn’t get applied.

What am I missing?

Answer 1

You need to add display: inline-block; to your anchor selector. Anchors are by definition inline elements and do not accept width, height, margin etc until they are defined as block level or inline-block elements.