Color not filling entire div padding glitch-CodePudding

HTML:

<div id="header">
      <p>Text</p>
</div>

CSS:

#header {
  background-color: #55ff00;
  border-bottom: solid 1px;
}

The background color fills from the text down to the bottom border; nothing above the text. How can I make the background color extend above the text?

There is one way I found that uses this weird glitch. I added padding: 1px to the CSS and the background color then extended all the way up like I wanted, but I don't think the code should have done that. I experimented more and found that it only works when the padding is above 0.01953124912688509844105px.

This was on Visual Studio Code. I replicated it on repl.it and found a different result: 0.015624999534338px (these are not the exact numbers, it keeps going).

I looked it up and found something relating to this error: https://codepen.io/mikemadman/pen/XRdMZP

Can anyone explain this glitch? And is there a normal way to extend the color upward without using a full border?

CodePudding user response：

Every time your website has a default padding and margin. So you have to remove that padding and margin. I hope my answer is helpful to you. You can read more about that here

*{
margin:0;
padding:0;
}
#header {
  background-color: #55ff00;
  border-bottom: solid 1px;
}

<div id="header">
      <p>Text</p>
</div>

CodePudding user response：

1.Reset default browser padding and margin with:

* {
  padding:0;
  margin:0;
}

2.Give your elements padding or margin where you need it:

#header {
  padding: 15px 30px;
}

Check out the demo below:

* {
  padding:0;
  margin:0;
}
body {
  font-family: sans-serif;
}
#header {
  background-color: #55ff00;
  padding: 15px 30px;
}

<div id="header">
      <h1>Text</h1>
</div>