0

Probably I am missing something fundamental, but here is the fiddle:

https://jsfiddle.net/cqn5g94r/5/

html {
  background: black;
}

.header {
  font-size: 6vh;
  color: rgb(245, 246, 230);
  text-align: center;
  background: linear-gradient(to right, #45adc1, #64f1c2);
  /* DELETE THE BORDER*/
  border: 1px solid #333;
}
<div id="header" class="header">
  <p>My Title</p>
</div>

If you delete the border, you can see, that the whole thing shrinks. And I want it to be thinner, but without the emty space above and below. Some Help anyone?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
koljaa
  • 28
  • 5
  • margin-collapsing of `p` .. add `p {margin:0}` – Temani Afif Feb 07 '18 at 13:47
  • @dippas, i don't agree with this duplicate. It's not only an issue with the margin of body but margin-collpasing issue. The p tag has margin going outside the header and when he add border the margin is inside. So he doesn't understand this behavior. So yes he has to make margin of body 0 and also understand the margin-collapsing and add margin:0 to p also [the link i shared] – Temani Afif Feb 07 '18 at 14:10
  • `p, body { margin: 0 }` – Jorjon Feb 07 '18 at 14:15

0 Answers0