5

I'm using an em-based margin for homogeneous (in terms of markup, class, id, etc.) items in a menu. As far as I can tell, the margins for each of these items should be rendered identically. However, some are being rendered as 1px, and some as 2px. There may be some pattern to this (e.g. every second item is rendered as 2px), but not that I can discern.

I've observed this behavior in both Firefox and Chrome, on Linux and OS X.

I'm guessing this is due to the calculated value of each these margins being a decimal number (1.6px according to chrome devtools), but why isn't the same decimal number being rendered consistently?

There's a codepen example below, and I'm also including an enlargement of a screenshot demonstrating the issue.

http://codepen.io/anon/pen/KoAbl

4
  • Could be the fonts being rendered differently: codepen.io/anon/pen/fDBpt
    – Arbel
    Commented Feb 28, 2014 at 18:35
  • @Arbel I'm not sure I follow you. I don't see why the fonts would be rendered differently on different lines, but even if they were I don't see how that would affect the issue that 1.6px is rounded down on some elements, and rounded up on others.
    – ebenpack
    Commented Feb 28, 2014 at 19:07
  • Look at the codepen I provided at codepen.io/anon/pen/fDBpt, the left borders are aligned perfectly on the edge of the padding, but visually, there is 1px space between the letter S and the left border, but no space between the left border and the letter F.
    – Arbel
    Commented Feb 28, 2014 at 19:16
  • @Arbel I think S probably just gets more spacing, or kerning, or whatever (sorry, I'm not really a fonts person, so I don't know the right term). If you change the text to be the same on every line, the issue persists. And I think that's not relevant anyway, as however the fonts are being rendered, each of the lines has the same 1.6px margin, that is being inconsistently rounded.
    – ebenpack
    Commented Feb 28, 2014 at 19:34

2 Answers 2

3

I'm just speculating, this is just a guess, but what if it does round it to the nearest whole pixel (1.6 => 2), but then accounts for that rounding in the next padding. Since the padding was 0.4 pixels too much last time, it'll be 1.6 - 0.4 = 1.2 pixels next time, which rounds to 1 pixel.

The next one will be 1.6 + 0.2, which is 1.8, and rounds to 2. Next will be 1.6-0.2 = 1.4, rounded down to 1. Next will be 1.6 + 0.4 = 2, and from that the pattern repeats itself again.

This would mean the paddings are 2px, 1px, 2px, 1px, 2px (repeat) 2px, 1px, 2px, 1px, 2px, which seems to me be the same paddings that you actually have.

1
  • I think you may be right. I wish I could find some documentation on the subject. Some other SO questions I looked at indicated that FF rounds to the nearest integer, and Chrome merely truncates, but those may have been referring to older versions. I also found the pattern (or possible lack thereof) to be particularly odd: 1,3,5,6,8,10,11,15,16,18,20,22,23,25,27...
    – ebenpack
    Commented Feb 28, 2014 at 19:24
1

I cant tell you exactly how em's are calculated. But I can tell you its probably due to a rounding of the font-size. You change the font-size to 10px or 20px and the inconsistency goes away. Change it to 15px and the problem comes back.

See this post: CSS: Em rounding error

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.