Padding issue

HTML & CSS
1

Hey,

I have a header with just a h1 tag and some text and as css i have set the height, padding and background color.

Now I want to set the text 5px from the left and top but as soon as I set a padding for the top it jumps down more than 5px. Any idea what is causing this and how I can solve this?

code:


<div id="header">
		<h1>Welcome to my page</h1>
</div>



/* HEADER */
#header{
	height: 100px;
	padding: [B]5px[/B] 0 0 5px;
	background:yellow;
	
}

Result:

2

Hey,

Thank you very much! This cleared it up for me!
Cheers!

3

Hi,

As soon as you set some padding on the parent the top margin of the h1 doesn’t collapse anymore and pushes the text down.

reset the margins on the h1 to zero:


#header h1{margin:0}

Read the section on collapsing margins if this is new to you as it is a common issue:)