Menu
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?
978
Answer: You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
The margin-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
Margins are used to create space around elements, outside of any defined borders. This element has a margin of 70px.
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.
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
