Can we remove all inner spacing from a div?

Question

<html>

<body>
  <div style="padding:0;margin:0;background-color:yellow">A</div>
</body>

</html>

This example shows there's still inner spacing above and below letter 'A'. Can that space be removed? Looking at this example: I would like to have no yellow pixels above or below letter 'A'.

In case that cannot be done, is there another way to have two elements one below the other with at most two pixels of space between text in those elements?

You may be able to do this with `line-height` but it's not possible with text as different font and characters' glyph are sized differently. Eg. You can adjust line-height for `A` but `Q` will get cut off. You can only safely do this with elements that you define exact size for. — josephting, Apr 10 '19 at 04:51
You might find this helpful: https://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element# — Esko, Apr 10 '19 at 04:53
You don't need to include or in your snippet. ; ) - and also, there is no padding or margin by default in a standard div - so, no need to try and remove it. — sheriffderek, Apr 10 '19 at 04:57
Possible duplicate of [Remove white space above and below large text in an inline-block element](https://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element) — Matsemann, Apr 10 '19 at 05:28

score 0 · Accepted Answer · answered Apr 10 '19 at 04:56

If you don't want the parent div to have any space above and below the character, you'll have to match the line-height of the div to the cap-height https://en.wikipedia.org/wiki/Cap_height - but it could be tricky with decenders - https://en.wikipedia.org/wiki/Descender . : / - but if you explain what you want to accomplish - I bet there is a better way. : )

div {
  background: red;
  margin-top: 2rem;
}

.normal {
  /* no rules for space */
  
}

.line-height {
  line-height: 0;
}

.line-height-b {
  line-height: .1;
}

.height {
  height: 0;
  overflow: hidden;
  /* not going to see this... */
}

<div class='normal'>A</div>

<div class='line-height'>A</div>

<div class='line-height-b'>A</div>

<div class='height'>A</div>

score 0 · Answer 2 · answered Apr 10 '19 at 05:16

0

Try setting the CSS line-height property value less then the font-size.

padding: 0;
margin: 0;
background-color: yellow;
font-size: 16px;
line-height: 12px;

answered Apr 10 '19 at 05:16

Rahul Malu

556
2
9

score 0 · Answer 3 · answered Apr 10 '19 at 05:20

0

<div style="line-height: 11px; height: 12px;background-color:yellow;">A</div>

Use combination of line-height and height.

answered Apr 10 '19 at 05:20

Shoyeb Sheikh

2,659
2
10
19

Can we remove all inner spacing from a div?

3 Answers3