SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: using margin...

  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    using margin...

    This may be a stupid Q.

    Why does the margin of a child element stretches the PARENT element horizontally, but not vertically?

    quick example:

    CSS
    div p{color: #fefefe; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; background-color: #2358b8; margin: 10px; padding: 15px; }
    div { background-color: #d0d0d0; margin: 0; }
    body { margin: 0; }


    HTML
    <body>
    <div>
    <p>this is conten with margin around it. 15px padding</p>
    </div>
    </body>


    I would have figured that with the BODY having a margin of 0, this div would be touching toe TOP of of the viewscreen...( essentially there would be a 10px edge all around the blue box (P tag) and 15px of blue all around the actual text. Instead there is 10px of WHITE from the top ( the BODY showing) and 10px of gray .. ( color of the DIV tag) showing at the left and right.

    I would have thought the P's margin would have stretched the containing DIV all around.

    is there a property of margin here I am not counting on?

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is due to margin collapse, and is one reason I tend to avoid top margins on elements.


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
  •