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 the following mean in CSS file definition?

#header
{
    padding: 0px;
    margin: 0px;
}

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)}