AMagyar AMagyar - 1 month ago 13
CSS Question

Chrome rendering inline-block height wrongly

So what I need is to place a plenty of inputs inside a div and they must fulfill the div.

In the firefox using the inline-block works fine, but in chrome it has a weird behavior as can be seen in plunker: Plunker

.cl {
font-size: 11px;
font-family: monospace;
background: black;
width: 50px;
height: calc(14.24px);
display: block;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
outline: 0 !important;
outline-offset: 0;
outline: 0;
}


Does anyone know a fix for that?

Answer

Simply add vertical-align: top; or any other vertical-align value to your inline-block elements.

Also, calc(14.24px) makes no sense, use simply height: 14px;
Also, avoid the use of !important (there's almost no reason to use it if your CSS is well structured)