Your example (with margin) does not work because you can’t apply margin to inline elements like a, span, b
.
Take a look:
- http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
- http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm
To fix your issue:
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;
}