specifying margins between texts

Question

I want to create a styleguide for a website, and say I have a h1 I always want there to be 28px bottom margin before the next text whatever it is, from the foot of the letters to the top of next letters. Problem is that in HTML if the line-height's always add some extra spacing, and it might differ for each text. Is there a rule to know exactly how much margin-bottom to use so it will always be 28px for example?

<h1>HL1: Meine Bestellungen</h1>
<h2>SL1: Bestellnr. 1234563</h2>


h1 {
    background: none repeat scroll 0 0 rgb(255, 255, 0);
    color: rgb(153, 145, 141);
    font-family: Georgia;
    font-size: 26px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 30px;
    margin-bottom: 28px;
    text-decoration: none;
    text-transform: uppercase;
}


h2 {
    background: none repeat scroll 0 0 rgb(0, 255, 0);
    color: rgb(196, 18, 47);
    font-family: Lucida Sans;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.1em;
    line-height: 20px;
    margin-bottom: 6px;
    text-decoration: none;
    text-transform: uppercase;
}

Thanks!

Are you talking about from the `h1`'s baseline or from it's descenders? — thgaskell, Aug 13 '13 at 16:49

score 1 · Answer 1 · edited May 23 '17 at 12:05

It's got nothing to do with line height, it's got to do with browser defaults.

For instance in my version of Google Chrome there is a margin-top value applied to the h2 by default. You should just specify all margins:

h1 {
    margin: 0 0 28px; /* shorthand notation */
}
h2 {
    margin: 0 0 6px;
}

Look into a "CSS reset", and in jsFiddle you can check the "Normalize CSS" option.

Reources:

https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
CSS reset - What exactly does it do?

specifying margins between texts

1 Answers1