CSS Div 填充

Question

I am struggling with what I suspect is a very basic concept with CSS (which I am just now learning). As you can see from my code below I have a very basic div element and a css file that sets the height of the div, and attempts to set the padding. What I do not understand is why the text will not stay centered vertically in the middle of the div when the padding-top and the padding-bottom are the same (10px).

<div id="div_header">
    <h1>Website TITLE</h1>
</div>

And here is the css:

#div_header{
background:#E07A1A;
font-family: var(--global-font-family);
font-size: 1.6rem;
font-weight: 300;
color: var(--global-text-color);
height: 60px;
width: 100%;
padding-left: 20px;
Padding-top: 10px;
padding-bottom: 10px;
}

With the settings as shown, this is what it looks like:

What am I doing wrong?

Answer 1

By default, all text header tags have margin above and below them. The above margin is essentially pushing your text down within your container. If you inspect the header in your browser's console this should be visible.

Add this snippet outside of your #div_header styles to fix it:

h1 {
    margin: 0;
}

On a side note, HTML 5 introduced semantic tags including a header tag that might suit your needs better. For example:

<header class="header">
    <h1 class="header__title">Website TITLE</h1>
</header>

Additionally, it is usually better to use classes instead of IDs as IDs will create an unnecessary degree of specificity , which could make it harder for you to overwrite, should you need to later on. Using the snippet above then, your CSS would look as so:

.header {
    background:#E07A1A;
    font-family: var(--global-font-family);
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--global-text-color);
    height: 60px;
    width: 100%;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.header__title {
    margin: 0;
}

There are many naming conventions for CSS, BEM is used above.

Answer 2

This is due to the default margin rules for the h1 tag. The margin needs to be overridden to 0, or set to display: inline (as an alternative). Just add this to your css:

#div_header h1 {
    margin: 0; /* or display: inline */
}

 #div_header { background: #e07a1a; font-family: var(--global-font-family); font-size: 1.6rem; font-weight: 300; color: var(--global-text-color); height: 60px; width: 100%; padding-left: 20px; padding-top: 10px; padding-bottom: 10px; } #div_header h1 { margin: 0; }

 <div id="div_header"> <h1>Website TITLE</h1> </div>

Answer 3

This should work for you, use below code

 #div_header { background: #E07A1A; font-family: var(--global-font-family); font-size: 1.6rem; font-weight: 300; color: var(--global-text-color); height: 60px; width: 100%; display: flex; align-items: center; padding-left: 10px; }

 <div id="div_header"> <h1>Website TITLE</h1> </div>

Remember - Use minimal but good CSS.