Results 1 to 6 of 6

Thread: Heading - Can't see why there is a gap at the top

  1. #1
    Join Date
    Aug 2009
    Location
    London
    Posts
    84
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default Heading - Can't see why there is a gap at the top

    Hi,

    I have copied and pasted some code below.

    When I view it in a browser there is a gap/margin above the heading, but I can't figure out what is causing this. I know it's gonna be simple but for now I've gone code-blind!

    <style>

    body {
    margin:0px; padding:0px;
    background-color:#cccccc;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }

    .column2 {
    float:left;
    width:220px;
    margin: 0px;
    padding: 0px;
    }

    .column2 h3 {
    font-size:12px;
    line-height:20px;
    text-indent:5px;
    color:#ffffff;
    background-color:#b71717;
    margin-right:30px;
    }

    </style>

    </head>

    <body>

    <div class="column2">
    <h3>HEADING GOES HERE:</h3>
    </div>

    </body>

  2. #2
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    A link to the page would be useful to get a better idea of what it looks like.

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    696
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there jhatter,

    many elements have default margins and the h3 element is one of them.
    So instead of...
    Code:
    
    .column2 h3 {
        font-size:12px;
        line-height:20px;
        text-indent:5px;
        color:#ffffff;
        background-color:#b71717;
        margin-right:30px;
     }
    
    ...use...
    Code:
    
    .column2 h3 {
        font-size:12px;
        line-height:20px;
        text-indent:5px;
        color:#ffffff;
        background-color:#b71717;
        margin:0 30px 0 0;
     }
    
    coothead

  4. The Following User Says Thank You to coothead For This Useful Post:

    jhatter (11-23-2009)

  5. #4
    Join Date
    Aug 2009
    Location
    London
    Posts
    84
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default

    Thanks Coothead - that did the trick!

  6. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    696
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    No problem, you're very welcome.

  7. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    696
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there unic-dev,

    If you don't require the default margins of certain elements then they must be, in your phraseology, nullified.
    As this post referred to the h3 element, you may be mildly interested in the default values that Firefox sets for the group....
    Code:
    
    h1 {margin: .67em 0;}
    h2 {margin: .83em 0;}
    h3 {margin: 1em 0;}
    h4 {margin: 1.33em 0;}
    h5 {margin: 1.67em 0;}
    h6 {margin: 2.33em 0;}
    
    coothead

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
  •