104

Can a CSS px be a fraction? Is it allowed by the standards? And if so, do the major browsers support it?

Let's back the answers up with documentation, folks.

Kees C. Bakker
  • 32,294
  • 27
  • 115
  • 203
  • 1
    @MetalFrog this question originates from a discussion at work :-) – Kees C. Bakker Jan 31 '12 at 14:00
  • 3
    Ironically, I recently had to use a fractional pixel to get a jQuery UI sortable grid to layout properly. When the margin on the placeholder was the same as or one pixel smaller than the margin on the surrounding items, the grid would shift all over the place when dragging. The only fix (and a cross-browser one at that!) was to decrease the placeholder's margin by 0.5px. Then, everything worked fine. Whether it's spec or not is mostly pedantic, you have to do what you have to do at the end of the day. – Chris Pratt Jan 31 '12 at 19:55
  • Are there rules about how a line of less than 1px should be rendered by the broweser? I have many pages (Word documents converted to HTML) where table borders have width corresponding to a fraction of a pixel. These display as 1px in IE and firefox but the border is not visible at all inside chrome – Andy Dec 09 '13 at 13:47
  • 1
    Was your original question regarding fractions or decimals? A fraction would be 1/3, whereas a decimal would be .33 (repeating). Mathematically, there's a difference, and if anything cares about the technicalities of math, it's computers. – Mike Nov 11 '15 at 19:15
  • 1
    Non-duplicate, but related - a discussion of fractional pixels being respected by rendering: https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected – Sandy Gifford Jan 02 '17 at 21:24

1 Answers1

92

Yes, you can specify fractional pixels. As this has been part of CSS since the very first version, it should be well supported by any browser that supports CSS at all.

Reference: CSS 2.1: 4.3.2 Lengths

"The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.)."

When the elements are displayed on the screen, most browsers will naturally round the position to the nearest pixel when using 100% zoom level. On higher zoom levels you will notice that fractional pixel values are recognized.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Do you have some documentation that supports the answer? – Kees C. Bakker Jan 31 '12 at 13:58
  • 1
    @KeesC.Bakker: I just added that. :) – Guffa Jan 31 '12 at 14:04
  • 9
    The problem is, different browsers round differently: http://stackoverflow.com/a/5587820/405015 – thirtydot Jan 31 '12 at 14:06
  • 6
    Found an interesting blog on the subject: http://ejohn.org/blog/sub-pixel-problems-in-css/ – cboler Jul 03 '12 at 16:14
  • 18
    To clarify, a fraction would be 1/3, whereas a decimal would be .33 (repeating). I acknowledge that it's partly semantics (not to a math major, it's not), but the correct answer is that CSS does not support fractions or fractional pixels. It does, however, support decimal pixel values. – Mike Nov 11 '15 at 19:12
  • 10
    @Mike: The term fraction can be used in different ways, just like the term decimal that can either specify a number having a fractional part or a number expressed in base ten. – Guffa Nov 12 '15 at 00:08
  • 1
    Whereas pixel fractions have no affect on browser rendering, they may have significant effect on printer output – alemjerus Jan 29 '17 at 08:47
  • I understand that browsers round differently, and thus fractional pixels will be treated differently across different browsers. However, I recently tested this and got different results using the **same** browser (and version!) but on 2 different Mac devices. What could be the cause of this behavior? – Nick Mar 07 '19 at 17:09
  • A different PPI (pixels per inch) value of the screens of those mac devices. – Kokodoko Jul 27 '22 at 14:34