SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Heading Margin-top Problem

    Hello. I cant create space between the top of the div#content and the h1 heading even I specify a margin-top declaration for h1. What is the problem here?
    Thanks in advance.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml"
    <
    head
    <
    title>Trial</title
    <
    style type="text/css">
    body,html {
        
    padding:0;
        
    margin:0;
    }

    #content {
        
    background-color:red;
    }

    h1 {
        
    background-color:green;
        
    margin-top:15px;
    }

    </
    style>

    </
    head>
    <
    body

    <
    p>
    Lorem ipsum dolor sit ametconsectetuer adipiscing elitSed non metusVestibulum fringilla fermentum tortorDonec sem diamhendrerit acultricies quisaliquam aturnaSed elementum pede eget elitMauris gravida sollicitudin nuncNunc fermentumMaecenas et purus sed libero congue imperdietCurabitur viverraMaecenas a leoProin gravida mollis pedeSed et leoProin semUt eu duiSed eros nequeconsectetuer atlaoreet egetdignissim quislectusLorem ipsum dolor sit ametconsectetuer adipiscing elit.
    </
    p>
    <
    div id="content">
    <
    h1>Quisque iaculis mi quis magna.</h1>
    <
    p>
    Lorem ipsum dolor sit ametconsectetuer adipiscing elitSed non metusVestibulum fringilla fermentum tortorDonec sem diamhendrerit acultricies quisaliquam aturnaSed elementum pede eget elitMauris gravida sollicitudin nuncNunc fermentumMaecenas et purus sed libero congue imperdietCurabitur viverraMaecenas a leoProin gravida mollis pedeSed et leoProin semUt eu duiSed eros nequeconsectetuer atlaoreet egetdignissim quislectusLorem ipsum dolor sit ametconsectetuer adipiscing elit.
    </
    p>
    </
    div>

    </
    body>
    </
    html

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Margins between vertically adjacent or nested elements will collapse into one margin if there is nothing solid in the ways (such as padding or borders). The top margin on the h1 collapses and becomes the margin on #content instead.

    You can get around this by adding some padding to the content to stop the collapse.

    Code:
    #content {
        background-color:red;
            padding-top:1px;
    }
    h1 {
        background-color:green;
        margin-top:14px;
    }
    See here for more information.

  3. #3
    SitePoint Addict
    Join Date
    May 2007
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much @Paul O'B.


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
  •