Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Css margin-top vs margin-bottom

Tags:

css

layout

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?

like image 311
ken Avatar asked Nov 12 '08 18:11

ken


People also ask

Should I use margin-bottom or margin-top?

Solution: Always Use Top Margin! The reason is related to the 'C' in CSS.

What is the difference between margin-bottom and bottom?

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.

What is the difference between top and margin-top in CSS?

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 .

What does margin 10px 5px 15px 20px mean?

margin: 10px 5px 15px 20px; top margin is 10px. right margin is 5px. bottom margin is 15px. left margin is 20px.


2 Answers

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.

like image 76
sblundy Avatar answered Sep 30 '22 13:09

sblundy


I always use margin-bottom, which means there is no unnecessary space before the first element.

like image 21
Winston Smith Avatar answered Sep 30 '22 13:09

Winston Smith