Can a CSS Pixel Be a Fraction

Can a CSS pixel be a fraction?

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.

Is there such a thing as fractional pixel?

There is no such thing as fractional pixel. Pixel is the smallest screen unit.

The thing you're experiencing happens because of the browsers math engines. Some of them round the decimal pixel part up to the next integer, and some of them floor it down.

To avoid that just define your pixels without decimal points. If you want to make the 2 elements visually closer you can play around with colors, for example - if you give a darker border to some elements they will seem to be closer - http://jsfiddle.net/fDbUj/

Why can I use 1.5px as size?

"I know that 1px is the smallest unit that a computer can represent" - what does this mean?

I think there may be some confusion between different types of pixel. There are device pixels, the 'blobs' that make up a physical screen. And there are CSS pixels.

In the 'old days' often a CSS pixel and a screen pixel would match so, yes, one CSS pixel was the minimum that could be represented on the physical device.

But nowadays often several device pixels are used to represent one CSS pixel.

This means that fractions of a CSS pixel may be able to be represented with more accuracy than in the past.

Hence a CSS value such as 1.5px may get represented accurately on a device which is using say 2 physical pixels (in each direction) to represent one CSS pixel.

A warning though- different devices use different numbers of physical pixels per CSS pixel, and browsers can interpret things differently and odd little fractions of CSS pixels can get 'left behind' when the system is trying to decide how to split things.

Are there browsers whose viewport-width (measured in css-pixel) can be a fractional number?

Media Queries only trigger on whole pixels. It will trigger when it hits the nearest whole number.

So if your query were written:

@media screen and (min-width: 900px) {
    .large {
        display: block;
    }
}

The query wont function unless the screen width is 900px +. It would use the query that includes values up to 899.9999999.... (infinite) px unless the screen width hits 900px or greater.

Are the decimal places in a CSS width respected?

If it's a percentage width, then yes, it is respected:

#outer {
    width: 200px;
}

#first {
    width: 50%;
    height: 20px;
    background-color: red;
}

#second {
    width: 50.5%;
    height: 20px;
    background-color:green;
}

#third {
    width: 51%;
    height: 20px;
    background-color:blue;
}

<div id="outer">
    <div id="first"> </div>
    <div id="second"> </div>
    <div id="third"> </div>
</div>