What is a pixel (px) in CSS?

Question

I am reading an ASP.NET book and it refers to CSS files and talks about pixels. But I never understood it from a resolution, layout, etc. point of view. For example, what does t

Answer 1

This is a little beyond where you might be at the moment, but a CSS pixel is not necessarily exactly the same size as a single pixel on your display. According to the spec:

If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

So if you have one of those incredibly expensive extra-high-resolution displays that doesn't count as “typical”, the browser and/or OS may choose to redefine what a “pixel” is.

The useful definition for a ‘px’ as far as CSS authoring is concerned is: a ‘px’ is the quantity of length equal to the pixel in an unscaled HTML <img> or CSS ‘background-image’.

Answer 2

A pixel is generally thought of as the smallest single component of a digital image.

The number of pixels in an image is called resolution.

The screen resolution is the number of distinct pixels in each dimension that can be displayed by your screen.

In the css snippet that you posted you're applying 0 pixels of margin and padding to the element with id="header".

_{(source: functionx.com)}

Answer 3

As stated by others, a pixel is simply a measurable unit that relates directly to the electronic display of data - a single pixel is the smallest an object on screen can be. The greater the screen resolution, the more pixels it can represent.

A note on the example given - a value of 0px is actually unnecessary as a zero value, and is better represented in CSS as just a 0 (it could equally be 0% or 0em, they all mean the same).

Answer 4

A pixel is a single dot on the screen. Your example sets the element named header with no padding or margin. To understand this you'll also need to understand the CSS box model for page layout.

Answer 5

A pixel is a unit of measurement, at least, in regards to CSS. There is also pt, em, percentage... there are a few others. Each have their strengths.

W3schools is chock full of references, check the one on CSS.

I recommend downloading Firebug and experiment with changing the pixel width/height.

Answer 6

"A pixel is not a little square" is a good discussion on what a pixel is.

It might not be relevant to your specific question, but if anyone else finds this thread for a computer graphics related problem, this is great reading.