1

Is there a way to remove the whitespace above and below the headings of h1-h6? Margin and padding were not working.

Check this codepen.

Thank you!

<div class="background">
  <h1>This is H1!</h1>
</div>

<div class="background">
  <h2>This is H2!</h2>
</div>

<div class="background">
  <h3>This is H3!</h3>
</div>

<div class="background">
  <h4>This is H4!</h4>
</div>

<div class="background">
  <h5>This is H5!</h5>
</div>

<div class="background">
  <h6>This is H6!</h6>
</div>

the css is

.background {
  background: orange;
  margin-bottom: 10px;
}
h1 {
  margin: 0;
  padding: 0;
}
John Joe
  • 12,412
  • 16
  • 70
  • 135
troyds
  • 65
  • 1
  • 7

2 Answers2

0

you're dividing the headers into sections! don't use the 'div' tag when all of the elements are going to have the same styles anyway!

<div style = "background-color:yellow">
  <h1>This is H1!</h1>
  <h2>This is H2!</h2>
  <h3>This is H3!</h3>
  <h4>This is H4!</h4>
  <h5>This is H5!</h5>
  <h6>This is H6!</h6>
</div>

note : the usage of "background-color" in the tag is the same as using css in your code. should fix your problem!

edit :

due to some confusion, the answer above is not what the Asker meant (see comments), so here's my new answer.

what you're aiming to do, can't be perfectly done (in my experience) but if you want; you can use boxes (images) in place of your actual headings.

or, use

<div class="background">
   <h1 style = "transform : scale(1,1.65)">This is H1!</h1>
</div>

which is a little bit cheesy, and can't be maintained well (if the font changes, it no longer fits perfectly) see : related

Community
  • 1
  • 1
Kevin fu
  • 222
  • 1
  • 4
  • 16
  • No. That's not what I meant. Sorry.. You see the background orange with the h1-h6 inside. there are space between the actual content (h1) and the space like somewhat padding (but is not). – troyds Mar 14 '17 at 05:51
  • do you mean the actual text and the background-color, and not the actual "white" space? so that the font fits perfectly with the orange? – Kevin fu Mar 14 '17 at 06:36
  • Yes! That's it. I don't want my h1 any have extra spaces and fit exactly with the orange background like there is no space. – troyds Mar 15 '17 at 05:32
  • Hi, Kevin! Thank you... I see... I thought I can remove it. Thank you – troyds Mar 16 '17 at 03:24
  • @Yortz no problem, it's what i do! ;) (don't forget to approve my answer for future readers) – Kevin fu Mar 16 '17 at 03:52
0

This will hide the white

<body style="background-color:orange;">
EDIT kevin beat me to it and his is better. lol
farmtireguy
  • 1
  • 2