CSS: Top vs Margin-top

Question

I'm not sure if I fully understand the difference between these two.

Can someone explain why I would use one over the other and how they differ?

Melitamelitopol

Answer 1

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.

Blight

So when should we use margin-top? if it is not positioning – Peggi

@PərvizPiri it depends on how you are positioning. That's the point. We usually use margin-top, except when we are using position absolute. – Blight

And the answer below is way better and complete than mine, btw – Blight

Answer 2

You'd use margin, if you wanted to move a (block) element away from other elements in the document flow. That means it'd push the following elements away / further down. Be aware that vertical margins of adjacent block elements collapse.

If you wanted the element to have no effect on the surrounding elements, you'd use positioning (abs., rel.) and the top, bottom, left and right settings.

With relative positioning, the element will still occupy its original space as when positioned statically. That's why nothing happens, if you just switch from static to relative position. From there, you may then shove it across the surrounding elements.

With absolute positioning, you completely remove the element from the (static) document flow, so it will free up the space it occupied. You may then position it freely - but relative to the next best non-statically positioned element wrapped around it. If there is none, it'll be anchored to the whole page.

Bouillon

Answer 3

Margin applies and extends / contracts the element's normal boundary but when you call top you are ignoring the element's regular position and floating it to a specific position.

Example:

html:

<div id="some_element">content</div>

css:

#some_element {margin-top: 50%}

Means the element will begin displaying html at the 50% height of its container (i.e. the div displaying the word "content" would be displayed at 50% height of its containing div or html node directly before div#some_element) but if you open your browser's inspector (f12 on Windows or cmd+alt+i on mac) and mouse over the element you will see it's boundaries highlighted and notice the element has been pushed down rather than re-positioned.

Top on the other hand:

#some_element {top: 50%}

Will actually reposition the element meaning it will still display at 50% of its container but it will reposition the element so its edge starts at 50% of its containing element. In other words, there will be a gap between the edges of the element and its container.

Cheers!

Drainpipe

~"...Means the element will begin displaying html at the 50% height of its container...": Percentages in "margin" properties are calculated according to the width of the container. So, "margin-top: 50%" actually means that the top margin will be equal to 50% of the width of that container (instead of 50% of the height) :). #34706680. – Earthling

Answer 4

The top property is a position property. It is used with the position property, such as absolute or relative. margin-top is an element's own property.

Mattingly

is there a difference between margin-top and top - when used with relative – Abbreviation

Answer 5

from bytes:

"Margin is that space between the edge of an element's box and the edge of the complete box, such as the margin of a letter. 'top' displaces the element's margin edge from the containing blocks box, such as that same piece of paper inside a cardboard box, but it is not up against the edge of the container."

My understanding is that margin-top creates a margin on the element, and top sets the top edge of the element below the top edge of the containing element at the offset.

you can try it here:

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

just replace top with margin-top to see the difference.

Pool

Answer 6

This is my understanding...

TOP: it defines the position of the element wrt its own elements or other element i.e in case of relative top refers to compare with its own element whereas in fixed top refers to compare with viewport.

Margin_Top: it always refer to its own elements that adds an offset(outside) to its border

Targett

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Harber

Answer 7

• top: it is positioning from top of content box
• margin-top: it is gap or space away from border box or preceding sibling element

<div class="text"></div>

.text {
  top: 50%;
} 

Daiseydaisi