Grow your CSS skills. Land your dream job.

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

    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.

*May or may not contain any actual "CSS" or "Tricks".