What's difference between (e.g) used "margin-left" and "left"

Question

my English isn't good. Tengo una duda, si usas la propiedad "Position" usas también propiedad "Top, Right etc." Pero porque usan "margin-top" en su lugar? Cuál es la diferencia? Lo puse en práctica y el resultado fue el mismo, Incluso le añadí bordes para ver si cambia algo pero no.

Answer 1

Consider this example :

https://code.sololearn.com/Wjbs0q41b921/?ref=app

There are two boxes in a container. One is a red box and the other is a blue one. The red box has 'margin-left' of 80px whereas, the blue box has 'left' of 80px. So, as per the the mathematical intention, we can say that they both will have a same distance. But boom, noo. The blue box seems slightly moved. Why this happens?

Now, the real question. If you look at it closely, you'll see that the container has a 'padding' of 50px. As a result when you use 'margin-left' the main position becomes 80px + 50px = 130px. That's why the red box seems has gone a bit more left. But the blue box still has the left of 80px. Why this?

Once again, if you look closely, you'll see, the blue box has a position property set to 'absolute'. That means when you'll use 'left' or 'right', 'top' or 'bottom', they'll be counted from main document. That is from the very left of your phone.

However, try editing the position to 'relative' and 'fixed' :))

Answer 2

Margin left means to add margin to the left of an element. While left is used with the position property to make space to the left on element.

Answer 3

Lo he puesto en práctica, agradezco la explicación con el ejemplo! Me ha ayudado a entender una gran parte, incluso aprendí el doble!, por lo del "margin" en el "body" y esa propiedad de "box-sizing" con el valor "border-box" . Aún me enreda un poco sobre el tema pero continuaré trabajando en ello para complementar el conocimiento y ver qué método debe usarse ante cada situación. Nuevamente gracias a todos! 👍😎