All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Font size of h1 applying padding?

  • # December 24, 2012 at 5:31 pm

    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;
    }

    }

    # December 24, 2012 at 5:52 pm

    This reply has been reported for inappropriate content.

    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}

    # December 24, 2012 at 6:06 pm

    ah, that’s it. the margin. All is fixed by setting the margin. Interesting…

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed