Menu
When creating an HTML page, should I specify things like margins with pixels or with points in CSS?
Is one of them considered to be better practice than the other? Any advantages or disadvantages to either one?
884
Pixels and points are static measurements - they don't change based on other factors: 1 pixel is always 1 pixel and is the smallest piece of a screen that can display colours. 1 point is always 1 point and is an abstract unit, only having meaning when referenced in relation to other points.
CSS inherited the units pt (point) and pc (pica) from typography. Printers have traditionally used those and similar units in preference to cm or in . In CSS there is no reason to use pt , use whichever unit you prefer. But there is a good reason to use neither pt nor any other absolute unit and only use em and px .
If you use absolute units, you don't have to worry about unexpected font sizes from breaking your layout. So my answer is use pixel units. I use px for everything. Of course, your situation may vary, and if you must support IE6 (may the gods of the RFCs have mercy on you), you'll have to use em s anyway.
What is a Pixel (px)? A pixel (px) at 96DPI (dots per inch) is equal to 0.2645835 millimeters, 0.010416675 inches, or 0.75 point. It is a measurement of how tall a font is in pixels which are visible on your computer screen.
Use px or em
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Generally, 1em = 12pt = 16px = 100%.
[Conclusion]
The winner: percent (%).
padding also.) For that, I would recommend px or em. Personally, I switch, depending on the particular situation.MORE ARTICLES
Point values are only for print CSS!
(Comment further down)
Points are for print? Nope.
Points are not for print exclusively. Theoretically, points are for defining an absolute measure. Pixels are not absolute, since depending on your screen and chosen definition (not resolution), the resolution (pixels per inch) can go from a lot (150dpi) or very little (75dpi). Which means your pixels can be a size, or maybe half that size. Which means that text you design to be perfectly legible on your screen may look too big on your client’s screen (“please make the text smaller, ok?”) or too small to be readable on your neighbor’s screen (“hey, the website you told me about the other day? the one you said you had worked on… well i couldn’t read the text very well, it’s so small”).
Points are a solution to this issue. But browsers and operating systems need to manage those. Basically, it means:
browsers have to calculate the display size in pixels using the given value (say, 10pt) and the screen’s real resolution; operating systems have to communicate the real current resolution, and not a default value.
Also:
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
