Differences between margin-top and top

Welcome to our community

Be apart of something great, join today!

silvestri

Newbie
Messages
2
Reaction score
0
Points
0
I'm learning CSS and I doubted the differences, well I'm designing a page with css but use margin-top and then change it to top and there was no change, then I do not know when to use u when using the other.
 

capitalist

Newbie
Messages
15
Reaction score
0
Points
0
margin top is absolutely on the margin against the top element. that is, it is as if you create a div there to fill

top is a positioner, that is, it places the element in a position, this is not part of the element (such as the properties that affect the margin)

usually behave very similar, but in the presence of the attribute position, top will have different behaviors than margin
 
  • Advertisement
  • silvestri

    Newbie
    Messages
    2
    Reaction score
    0
    Points
    0
    So for example I was designing a page to practice and use pure margin-left and margin-top, it would have been better to use the top and left to position
     

    capitalist

    Newbie
    Messages
    15
    Reaction score
    0
    Points
    0
    no, it is usually better to maintain margin than positioning, positioning can disagree on responsive, margin is more solid in that aspect, usually top and left is used with position when it is absolute or fixed.
     
  • Advertisement
  • Daniel204

    Newbie
    Messages
    7
    Reaction score
    0
    Points
    0
    Hi,

    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 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.

    Regards,
    TechTIQ Solutions
     

    Patrick_Kane

    Newbie
    Messages
    12
    Reaction score
    0
    Points
    0
    My undеrstаnding is thаt mаrgin-top crеаtеs а mаrgin on thе еlеmеnt, аnd top sеts thе top еdgе of thе еlеmеnt bеlow thе top еdgе of thе contаining еlеmеnt аt thе offsеt. just rеplаcе top with mаrgin-top to sее thе diffеrеncе.
     

    Advertisement

    Top