Inline block overlaps container border in Chrome

Question

Why does the inline block overlap the bottom border of the container in Chrome in the following test case?

HTML:

<ul>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
</ul>

CSS

ul {
  border-bottom: 1px solid red;
  font-size: 12px;
}
li a {
  display: inline-block;
  padding: 0.4em;
  background: yellow;
}

test case:

+3

Paul Kozlovitch 26 Aug 14 at 11:23

3 answers

If you don't care about bullet points, you can clear them with vertical alignment: at the bottom of the link element:

li a {
    vertical-align:bottom;
}

+1

AlexDom 26 Aug 14 at 12:27

It's all about calculating elements em

. Use round values em

like (0.5em, 1em ..), this will give correct results.

li a {
display: inline-block;
padding:0.5em;
background: yellow; 
}

0

Suresh Ponnukalai 26 Aug 14 at 11:38

Paul Kozlovitch · Accepted Answer · 2014-08-26T12:04:44+0000

In fact, I found a bug report .

Please post this issue if you are experiencing the same.