treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Font size of h1 applying padding?

  • Hello, I am using css normalize http://necolas.github.com/normalize.css/ and I am finding that by changing h1 font size is adding a padding. I cannot find where this is specified.

    here is what I am trying to use to over-ride but no avail. Any ideas?

    h1 {
      font-size: 6em;
      text-align: center;
      padding-top: 10px;
      padding-bottom: 0;
                }
    

    here is my global css

    @import "compass/css3";
          @import "normalize";
         @import "bits";
          @import "toolbox";
         @import "grid";
    
    
    
         a {
    
           text-decoration: none;
           color: #101010;
            border-bottom: 2px solid transparent;  
            }
    
            // -------------------------------------- HEADER
             .logo {
     margin: 50px auto 10px;
     width: 33px;
     height: 34px;
     padding: 8px;
    a {
      background: #e05f5a;
      color: white;
    
    }
             }
    
               // ---------------------------------------NAV
              .main-nav {  
    list-style: none;
    margin: 0 auto 80px auto;
    padding: 0;
    text-align: center;
    
    li {
      display: inline;
    }
    a {
      display: inline-block;
      padding: 5px;
    
    }
    
    
    a:hover {
      border-bottom: 2px solid;
    
      position: relative;
    }
    
    
            }
    
          .font-btns {
    list-style: none;
    margin: 0 auto 20px auto;
    padding: 0;
    text-align: center;
    
    li {
      display: inline;
    }
    a {
      display: inline-block;
      padding: 5px;
      color: white;
    
    }
           }
    
          // -------------------------------------- PAGE
          .page-wrap {
    width: 55%;
    margin: 0 auto;
    padding: 5px;
    
        }
    
         .pointer {
            cursor: pointer;
    
            }
    
            article p {
           width: 35%;
            margin: 0 auto 10px;
    
              }
    
    
    
              footer {
       height: 200px;
    
              }
               // -------------------------------------- EXPANDED VIEW
           .font-btns {
    list-style: none;
    margin: 0 auto 20px auto;
    padding: 0;
    text-align: center;
    
    li {
      display: inline;
    }
    a {
      display: inline-block;
      padding: 5px;
      color: white;
    
         }
               }
    
          .expanded {
    background: #e05f5a;
    color: white;
    width: 100%;
    
    p {
    padding: 10px 5px 30px 5px;
    width: 35%;
    margin: 0px auto 10px auto;
          }
    
          }
    
  • There's no default padding applied by browser on H1 but margin is. So the margin will grow or shrink with changing font size. So set margin on H1 to 0 and use shorthand on padding like

    h1 {padding: 10px 0 0}
    
  • ah, that's it. the margin. All is fixed by setting the margin. Interesting...