What's the difference between top and margin-top in css?

Navigation
4

This is a subject that always confuses me a lot. What is the real difference between them? When to use both? I usually go through trial and error, but I need to understand how it really works.

    
asked by anonymous 17.12.2014 / 13:31

2 answers

5

Each element in HTML is always a box.

This box has 4 area values:

  • The first, most internal, is that of the element itself. In the case of an image, it is the image itself.
  • The second one is called padding , in general it is transparent and little used. In the case of images, it's something like the inside of the frame.
  • The third one is called margin . It is the frame itself from the picture frame.
  • And last, but not least, we have border . It's the outermost part of the box.

    • In css , you can manipulate the properties of each part of the box with the properties:

  • padding ;
  • margin ;
  • border ;

    • Now, when it comes to properties like top , bottom , left and right , you are changing the position of the element, and thus the base position of the element box.

    If you use Chrome, you can right-click an image, and click% with%. In the right corner, you have an image of the box of the element you are inspecting.

        
    17.12.2014 / 13:39
    -1

    The "top" positions the element in a coordinate, the margin-top uses the "siblings" of the object in question, just giving a space.

        
    17.12.2014 / 13:35
    Entity Framework auto relationship enable cascading delete Create and manipulate multidimensional associative array