Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2010
    Location
    Ohio
    Posts
    29
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Don't understand Heading spacing

    Would someone please explain to me how the margins/padding around headings work and what to do about them when they interfere with DIV elements?

    I was having an issue yesterday while trying to code a site with a main content element that was supposed to butt up against the element above it. I kept having an issue where there was a bar with the background color showing between the two elements. After much hair pulling, I finally figured out that it was because the first line of text was coded as <H1> and that was causing the problem. I put a <br /> ahead of it and the space closed up, but that isn't really the way I want it because now there is a lot of blank space.

    Quick and dirty example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .content {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #000;
    }
    #box1 {
    	background-color: #FFC;
    	width:100%;
    }
    
    #box2 {
    	background-color:#FCC;
    	width:100%;
    }
    
    #box3 {
    	background-color: #FFC;
    	width:100%;
    }
    
    #box4 {
    	background-color:#FCC;
    	width:100%;
    }
    
    </style></head>
    
    <body class="content" style="font-size: 14px">
    
    <div id="box1">some text</div>
    <div id="box2">some text</div>
    <div id="box3">
      <h1>some text</h1>
    </div>
    <div id="box4">some text</div>
    
    </body>
    </html>
    "Fixed" code that shows the top elements together but the bottom one is still off:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .content {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #000;
    }
    #box1 {
    	background-color: #FFC;
    	width:100%;
    }
    
    #box2 {
    	background-color:#FCC;
    	width:100%;
    }
    
    #box3 {
    	background-color: #FFC;
    	width:100%;
    }
    
    #box4 {
    	background-color:#FCC;
    	width:100%;
    }
    
    </style></head>
    
    <body class="content" style="font-size: 14px">
    
    <div id="box1">some text</div>
    <div id="box2">some text</div>
    <div id="box3">
      <br /><h1>some text</h1>
    </div>
    <div id="box4">some text</div>
    
    </body>
    </html>
    I also noticed that if I try to float two elements next to each other that the padding interferes with them and causes them to not line up. For example, if I make one 80% and another 20% and contain them within another element they are fine. But if I try to add an internal margin to the elements themselves, they are "too big" to fit. However, if I instead create a new class and apply it to the text that has the same padding, it works just fine.

    How can I account for this and still keep elements where I want them?

    I'm still trying to wrap my head around the differences while switching from table design to CSS and am finding coding taking far longer than it used to just because I don't understand.

  • #2
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    If possible remove the tag <h1> and add style using css

  • #3
    New Coder
    Join Date
    Mar 2010
    Location
    Ohio
    Posts
    29
    Thanks
    13
    Thanked 0 Times in 0 Posts
    I could, but I was trying to use the headings for SEO.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Add
    Code:
    *{
    margin:0;
    padding:0;
    }
    into your CSS to remove all browser specific values of margins and paddings from all elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    cable2001 (08-21-2010)

  • #5
    New Coder
    Join Date
    Mar 2010
    Location
    Ohio
    Posts
    29
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Hmm. That looks promising. Add it where? Is that a standalone at the top or does it go into the main element or each element as needed?

    Because I just checked and I have it in the main wrapper element already.
    Last edited by cable2001; 08-21-2010 at 07:04 PM.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Add it where? Is that a standalone at the top or does it go into the main element or each element as needed?
    Add into your CSS file. * is the universal selector to refer all the elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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