Why doesn't padding-top
work? The height of the div
is set.
HTML:
<div class="menu"> <a href="#">APIE MUS</a> <a href="#">REKLAMA</a> <a href="#">PARTNERIAI</a> </div>
CSS:
.menu { width: 300px; height: 30px; background: red; } .menu a { padding-top: 10px; }
An element's padding is the space between its content and its border. The padding-top property sets the top padding (space) of an element. Note: Negative values are not allowed.
This happens because the div has no border, and no padding defined, and the CSS specification states to collapse the two top margins into a single one of the parent. (The same happens with bottom margins.)
If you only wanted to change the top and bottom, just use the shorthand padding:30px 0px 30px; would be top, right, bottom.
Your example (with margin) does not work because you can't apply margin to inline elements like a, span, b
.
Just add display:inline-block;
This value (inline-block) causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box. Source: http://www.w3.org/TR/CSS2/visuren.html#inline-level
So this will fix your issue:
.menu a{ margin-top: 10px; display:inline-block; }
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