SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    margin and padding

    Code:
    <!doctype html>
    <html> 
      <head>
        <meta charset="UTF-8">
        <title>padding100</title>
        <style type="text/css"> 
        * {margin:0;padding:0}
       </style> 
    </head> 
    <body style="margin:10px;padding:100px;"> 
    padding 100
    </body> 
    </html>
    The result of the code above is at http://dot.kr/x-test/padding100.php .

    The result of the code below is at http://dot.kr/x-test/margin100.php .
    Code:
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>margin100</title>
        <style type="text/css"> 
          * {margin:0;padding:0}
        </style> 
    </head>
     
    <body style="margin:100px;padding:10px;"> 
    margin 100
    </body> 
    </html>
    I think they are same in effect.
    I like to know the essential difference between margin and padding.
    I like to know the meaning of them in CSS.

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    padding and margin are different

    the css box model should explain.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you. the css box model says it clear.

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've missed one thing: the border.

    Put a border in there and things should clarify by them self: margin has to do with the neighbours of an element (in relation with the outside), padding has to do with the content of an element (in relation with the inside).

    Border: a name chosen not on a whim.

    Margin: outside buffer. Padding: inside buffer.

    Margin: outside "padding". Padding: inside "margin".

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    You've missed one thing: the border.

    Put a border in there and things should clarify by them self: margin has to do with the neighbours of an element (in relation with the outside), padding has to do with the content of an element (in relation with the inside).

    Border: a name chosen not on a whim.

    Margin: outside buffer. Padding: inside buffer.

    Margin: outside "padding". Padding: inside "margin".
    I agree with you here noonnope, I find the explanation at W3 not realy clear. The only difference they mention is the background color

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    it's also VERY IMPORTANT to note that padding and borders don't interact with each other. It not something you would foresee in Joon's code, above. but if you had to elements lets say P like this and p {margin: 0; padding:15px; border:none }

    <p>text</p>
    <p>more text</p>

    the distance between the text would be: 30px ( 15px of padding bottom from the first P and 15px of padding top from the second P)

    however if the CSS was {margin: 15px; padding:0; border:none }
    the distance would be 15px!!! that is margin collapse... it unexpected at first , but I have found it can be harnessed and quite useful.

    BUT WAIT THERE IS MORE!
    If the CSS is {margin: 15px; padding:1px; border:none } or {margin: 15px; padding:0; border:1px solid pink }

    the distance is now 32px!?!?! Yes, even tho the margin is outside the the border and/or padding interferes with its collapse so you sum all the attributes up to get the distance:
    margin top+ margin bottom + Border top+ border bottom+ padding top+padding bottom,
    remembering of course that the margin distance will always be transparent , the padding will take on the background color of the element and the border can have its own color, or be transparent ( but when the border IS TRANSPARENT... it will show the Background color of the element through)


    another thing is: you can have NEGATIVE margins p{margin:-5px} which would move things towards each other rather than away... but there is no such thing as negative padding...

    Also while padding and margins can use px, em or %, borders only take px or ems

    other than the proverbial BOX MODEL.. which is of little concern if you aren't developing for IE previous to 6, AND use STRICT DOC TYPES....


    that's padding/margin/borders 101

  7. #7
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    it's also VERY IMPORTANT
    ... omit...
    that's padding/margin/borders 101
    Thank you. it's quite informative structurely.

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    it's also VERY IMPORTANT to note that padding and borders don't interact with each other. It not something you would foresee in Joon's code, above. but if you had to elements lets say P like this and p {margin: 0; padding:15px; border:none }

    <p>text</p>
    <p>more text</p>

    the distance between the text would be: 30px ( 15px of padding bottom from the first P and 15px of padding top from the second P)

    however if the CSS was {margin: 15px; padding:0; border:none }
    the distance would be 15px!!! that is margin collapse... it unexpected at first , but I have found it can be harnessed and quite useful.

    BUT WAIT THERE IS MORE!
    If the CSS is {margin: 15px; padding:1px; border:none } or {margin: 15px; padding:0; border:1px solid pink }

    the distance is now 32px!?!?! Yes, even tho the margin is outside the the border and/or padding interferes with its collapse so you sum all the attributes up to get the distance:
    margin top+ margin bottom + Border top+ border bottom+ padding top+padding bottom,
    remembering of course that the margin distance will always be transparent , the padding will take on the background color of the element and the border can have its own color, or be transparent ( but when the border IS TRANSPARENT... it will show the Background color of the element through)


    another thing is: you can have NEGATIVE margins p{margin:-5px} which would move things towards each other rather than away... but there is no such thing as negative padding...

    Also while padding and margins can use px, em or %, borders only take px or ems

    other than the proverbial BOX MODEL.. which is of little concern if you aren't developing for IE previous to 6, AND use STRICT DOC TYPES....


    that's padding/margin/borders 101
    Very well explained dresden_phoenix, I suggest you write the explanations for W3 from now on

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Also I'd point out that due to some browser oddities I would NEVER apply margin OR border to body.

    Just saying. It's like trying to apply styling to HTML, it's just not predictable enough to be trusted.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •