Empty space around my header

[MetalManiac1331]

I recently started HTML with a Glitch website (very good stuff btw ) and tried to use the <header> HTML tag on my website. Nevertheless, I get a weird space around the header letting my background through. Why is that so?

My HTML:

<header class="header">
  <u1>CommAndBlockagent</u1>
</header>

My CSS:

header.header {
  padding: 30px;
  background: #23272a;
  color: #23272a;
  font-size: 30px;
  margin: 0;
}

[RiversideRocks]

@MetalManiac1331

padding: 30px;

I’m no css expert, but reducing the padding would help.

[no_one]

@RiversideRocks

@MetalManiac1331

padding: 30px;

I’m no css expert, but reducing the padding would help.

No, it definitely won’t. What you need to do is set the body margin to 0, and create a separate div for the content below the header. After that, just set the margin of the div to whatever you want, and it will work perfectly.

[javaarchive]

I don’t think the document’s default user agent padding and margin have anything to do with that because default margin is a lot smaller

Here are some quick screenshots demonstrating difference between padding and margin. Here I’ve turned lanky’s post pink for the unchanged styling

With margin:

With padding:

Also chrome has this lovely tool showing how margin gets applied after the border which is applied after padding. If you think about it, the background should not apply outside the border so using margin will not keep your background styling. However if you go to the parent element (the one that contains the element) and set the color that background will show up at the margin

Parent element background color change

[MetalManiac1331]

Thanks, the Chrome (or Edge, in my case) trick works perfectly!