0

I'm wondering why these selectors produce same result

#position2{
     margin-left:25px;
    }
    
#position3{
     padding-left:25px;
    }
<h1 id="position2">Stackoverflow</h1>
<h1 id="position3">Stackoverflow</h1>
could any one explain major difference between these two properties
GonnaHack
  • 57
  • 1
  • 3
  • 12
  • Shortest possible explanation: Padding adds space *within* the element, whereas Margin adds space *outside* of the element. – Jos van Weesel May 31 '18 at 10:29

1 Answers1

0

Sure!

So the margin is added outside of the element you've targeted - in this instance it is placed to the left of the outside of the #position2 div.

padding, on the other hand, is added inside the element you've targeted. The easiest way to see this is by adding a background color to the code you've already got: 

#position2{
        margin-left:25px;
        background-color: blue;
    }

#position3{
        padding-left:25px;
        background-color: red;
    }

This then outputs this, giving a clear visual representation of what's happening: enter image description here

Sternjobname
  • 740
  • 1
  • 10
  • 23