What's difference between (e.g) used "margin-left" and "left" | Sololearn: Learn to code for FREE!
Neuer Kurs! Jeder Programmierer sollte generative KI lernen!
Kostenlose Lektion ausprobieren
+ 2

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

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.

12th May 2020, 4:26 PM
Xombra
Xombra - avatar
3 Antworten
+ 5
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' :))
12th May 2020, 4:44 PM
Arb Rahim Badsa
Arb Rahim Badsa - avatar
+ 1
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.
12th May 2020, 4:46 PM
Sajid
Sajid - avatar
0
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! ­čĹŹ­čśÄ
12th May 2020, 6:04 PM
Xombra
Xombra - avatar