Home/ Questions/Q 8893375
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T23:13:54+00:00

I have noticed a problem with size of elements in Chrome browser. I have

  • 0

I have noticed a problem with size of elements in Chrome browser.
I have written a simple code:

<html>
<body>
<table border="1px">
<tbody>
<tr>
    <td>
        <span style="display: inline-block; width: 5cm">TEXT</span>
        <span style="display: inline-block; width: 5cm">TEXT</span>
        <span style="display: inline-block; width: 5cm">TEXT</span>
        <span style="display: inline-block; width: 5cm">TEXT</span>
    </td>
</tr>
</tbody>
</table>
</body>
</html>

I expect to have 4 spans repeated vertically, 5cm each. It works on IE, Firefox, etc.:
IE – Works fine

But Chrome suffers the following problem:
Chrome – Doesn’t work

In IE, spans have 189px width each and td has 772px.
In Chrome, spans have 189px width each and td has 771px.

Is this some kind of Chrome issue? Why my td element doesn’t fit its content? It’s important for me to stay with those span elements (I cannot replace them with i.e. div) and to set width in cm. The issue still exists when I remove table border.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    CSS cm units are unreliable if you want a fixed number of pixels. They’re also not likely to actually measure 5cm on the screen. The cm unit is intended mainly for printing styles. Yes, it can be used on screen, but don’t expect any accuracy from it.

    The fact that a 5cm box is rendered as 189 pixels tells us that a cm is not a whole number of pixels. This alone should be enough to tell you that you’re unlikely to get accurate pixel-level cross-browser rendering using cm units.

    It’s just not going to happen. If you want pixel-perfect accuracy, use px units.

    You say in the question that you can’t change the units. You really should reconsider that if possible, because it’s only going to keep giving you these issues.

    If you really can’t change them, then the one way I can think of to resolve your issue without changing the units is to give the <td> element a white-space:nowrap style. This should force all the spans onto the same line regardless of whether the browser thinks they should be there or not. It should do the trick for you. But it doesn’t resolve the underlying problem, and it will likely come back in other ways if you keep using cm units on the screen.

    As for what exactly is causing the glitch in the first place, I would guess that Chrome is handling the floating point pixel values slightly differently, and that there is a rounding error when it adds the pixel widths of the spans to work out how wide to make the <td>. If this is the case, then it sounds like a bug in Chrome, and you could report it to them, but given everything I’ve said above, I can’t see them making it a high priority issue.

    • 0