Unexpected padding in inline-block elements

Question

Run the snippet below, and you will see that these two balck boxes occupy more space than they need (vertically). Why is that so? I have tried settting margin / padding to 0, but it did not work.

div.ex4 {
  display: block;
  background-color: lightblue;
  overflow: visible;
}

.imag {
    width: 20px;
    height: 20px;
    background-color: black;
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

<div class="ex4"><div class="imag"></div><div class="imag"></div></div>

no they are occupying 20 px each both width and height – Alberto Sinigaglia Jun 21 '20 at 10:47 — Alberto Sinigaglia, Jun 21 '20 at 10:47
. can't you use `display: flex`? – Alberto Sinigaglia Jun 21 '20 at 10:53 — Alberto Sinigaglia, Jun 21 '20 at 10:53

score 0 · Answer 1 · answered Jun 21 '20 at 10:50

0

use font-size: 0;

div.ex4 {
  display: block;
  background-color: lightblue;
  overflow: visible;
font-size: 0;
}

.imag {
    width: 20px;
    height: 20px;
    background-color: black;
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

<div class="ex4"><div class="imag"></div><div class="imag"></div></div>

answered Jun 21 '20 at 10:50

ebyte

1,469
2
17
32

I don't seem to figure out how it all related to `font-size`! could you help with this? – Sapinder Singh Jun 21 '20 at 10:54
i don't konw too,.... but u can google – ebyte Jun 21 '20 at 10:56
1

@Sapinder don't use font-size:0 it's a hack. Check the duplicate for the correct solution – Temani Afif Jun 21 '20 at 13:34

Unexpected padding in inline-block elements

1 Answers1