inline-block overlaps container's border in Chrome

Question

Why inline-block overlaps container's bottom border in Chrome in 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:

Looks like a bug. A "simpler" version: http://cssdeck.com/labs/0d2acp4c — thirtydot, Aug 26 '14 at 11:47
Last point : this article can add some explanation to 'inline-block problems' http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward — AlexDom, Aug 26 '14 at 12:48

score 2 · Accepted Answer · answered Aug 26 '14 at 12:04

2

Actually, I found bug report.

Please, star this issue, if you are experiencing the same.

answered Aug 26 '14 at 12:04

Paul Kozlovitch

score 1 · Answer 2 · answered Aug 26 '14 at 12:27

1

If you don't care about bullet points you can clear that with vertical-align:bottom on the link element :

li a {
    vertical-align:bottom;
}

answered Aug 26 '14 at 12:27

AlexDom

score 0 · Answer 3 · answered Aug 26 '14 at 11:38

0

It is all about calculating the em elements. Use round values in em like(0.5em, 1em..), it will give proper results.

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

answered Aug 26 '14 at 11:38

Suresh Ponnukalai

1

Perhaps but with display:block, you don't have this problem with 0.4em – AlexDom Aug 26 '14 at 11:44

3 Answers3