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

Asked

Viewed 1,654 times

4

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

css

  • Still on the topic (at least it worked for me). With position: Absolute, the coordinates (top, left, right, bottom) work well.

2 answers

5


Every element in HTML is always a box.

This box has 4 area values:

  1. The first, innermost, is that of the element itself. In the case of an image, it is the image itself.
  2. The second is the call padding, in general, it is transparent and little used. In the case of images, it is something like the inner part of the frame.
  3. The third is the call margin. It is the frame itself of the picture frame.
  4. And last but not least, we have the border. It is the outermost part of the box.

In css, you have how to handle the properties of each of the box parts with the properties:

  1. padding;
  2. margin;
  3. border;

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

If you use Chrome, you can right-click an image, and click on Inspecionar elemento. In the right corner, you have a picture of the element box you are inspecting.

  • But why do top, bottom, left and right not always work? They are directly linked to the position?

  • Position is another way of determining the position. Explaining: - Position determines the tipo of positioning an element. If the element is a block, if it is an inline element, it is in this attribute that you determine this. - Top, bottom, left and right are attributes attached to the margin. at this link.

  • Thanks! Got it here:D

-1

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

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.