CODEWITHSUNDEEP
htmlcss
Jamie Fearon
Jamie Fearon

Reputation: 2634

Large distance between two adjacent <h...> elements

I have noticed when I have a <h2> tag directly below an <h1> tag there is a large gap between the two. No padding or margin is set and I've normalised the css using normalize.css. Why does this gap exist?

Fiddle here: fiddle

Here is a screen shot:

Screen Shot

html (normalize.css is active on this html)

<div class="header">
    <div class="wrapper">
        <h1>Portfolio of...</h1>    
        <h2>Jing Xue</h2>
    </div>
</div>

css

.wrapper {
    width: 940px;
    margin: 0 auto 0 auto;
}

/* header ------------------------------------------------------------------ */

.header {
    text-align: center;
    padding: 40px 0 0 0;
    margin-bottom: 40px;
}

.header h1 {
    font-family: 'Delius Swash Caps', cursive;
    font-size: 250%;
    color: rgb(200,50,50);
    /* margin-bottom: -50px; */
}

.header h2 {
    font-family: 'Playfair Display SC', serif;
    font-size: 450%;
    color: rgb(59,67,68);
}

Further Question

For what ever the reason for this big gap between "portfolio of..." and "Jing Xue", is the correct way to reduce the gap to give a negative top/bottom margin on the corresponding <h..>?

Upvotes: 1

Views: 361

Answers (2)

dsgriffin
dsgriffin

Reputation: 68596

This is normal behaviour for these elements..

You forgot to take the default margin-top off of your h2 element. Simply add margin-top:0px; to your h2 class.

Here is a working jsFiddle.

Your class should now look like below:

.header h2 {
    font-family: 'Playfair Display SC', serif;
    font-size: 450%;
    color: rgb(59,67,68);
    margin-top:0px;
}

Here is an image from W3 regarding some default styles of elements:

enter image description here

See more about default styles of elements here on W3.org.

Upvotes: 1

Scott
Scott

Reputation: 21882

h1 through h4 tags have a default margin. You need to remove that margin in your CSS.

.header h1 {
    font-family: 'Delius Swash Caps', cursive;
    font-size: 250%;
    color: rgb(200,50,50);
    margin:0;
}

.header h2 {
    font-family: 'Playfair Display SC', serif;
    font-size: 450%;
    color: rgb(59,67,68);
    margin:0;
}

Upvotes: 5

Related Questions