If you have a sequence of block elements and you wanted to place margin in between them.
Which do you prefer, margin-top or margin-bottom or both? Why?
Solution: Always Use Top Margin! The reason is related to the 'C' in CSS.
The margin-top specifies the element's top gap from another element. Same thing goes for bottom where it starts counting the pixels or whatever units defined from the bottom, and margin-bottom defines the gap below the element.
top is for tweak an element with use of position property. margin-top is for measuring the external distance to the element, in relation to the previous one. Also, top behavior can differ depending on the type of position, absolute , relative or fixed .
margin: 10px 5px 15px 20px; top margin is 10px. right margin is 5px. bottom margin is 15px. left margin is 20px.
Depends on context. But, generally margin-top
is better because you can use :first-child
to remove it. Like so:
div.block { margin-top: 10px; } div.block:first-child { margin-top: 0; }
This way, the margins are only in between the blocks.
Only works for more modern browsers, obviously.
I always use margin-bottom
, which means there is no unnecessary space before the first element.
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