Margin Vs Positioning?

Question

As a beginner, I'm learning CSS and this Margin vs Positioning all messed up in my concept!
Actually I learned that margin used to create space around element and Positioning for layout.

Then why should one use margin to position an element?
And if the margin is the blank area of an element in the page, but when we use positioning property that margin area became override and elements overlapped, why is that happen?

Answer 1

It can, yes. For example, you have a green background, and then you put a 50px white margin around both of your photos; you can then position those photos overlapping each other, however they will still have the margins around them, so whichever photo is on top you would still see the 50px margin around it. Best way to understand is if you take a couple hours to play around with it here in the Playground, and see what all the features do experientially. Cheers 👍

Answer 2

Maybe think of it this way:

Positioning is used for layout, while margins are used to put padding (space) in between your elements. For example, I might have 2 images side by side, which I can achieve with positioning. However, if I don't want those images touching, or if I want to make a simple picture frame around them, I can use margin to accomplish that. Margin also helps with responsiveness, as only hard coding positions may not always show correctly on all devices. I hope that helps!

Answer 3

Like that code..

https://www.sololearn.com/learn/CSS/1118/

Answer 4

Anthony Quick But Can positioning override margin and overlap between elements happen? Can you explain that please?