CODEWITHSUNDEEP
css
Adam Katz
Adam Katz

Reputation: 6962

How many pixels font-size have for elements?

If font size is 16px, does that mean it is 16px tall and 16 px wide?

I am trying to make a banner and the banner needs to be 40 px tall. The font in the banner is 16 px in font size, so if I give the font a top and bottom margin of 12 px then the banner will be 40 px?

Upvotes: 1

Views: 157

Answers (2)

Shekhar Pankaj
Shekhar Pankaj

Reputation: 9145

Pixel is Not square !! Pixel is not Square

There is great reading at W3.org on this

i would like to quote some point here from the given link

On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another. It's better to reserve these units for high-resolution devices and in particular for printed output. On computer screens and handheld devices, you'll probably not get what you expect.

Px depends on Device

The px unit is the magic unit of CSS. It is not related to the current font and usually not relatated to physical centimeters or inches either. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like an e-book reader? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.

Upvotes: 1

Debajyoti Das
Debajyoti Das

Reputation: 2138

enter image description here

This image should help... Read more about it at http://thenewcode.com/606/Molten-Leading-Exploring-The-CSS-Relationship-Between-Font-Size-LineHeight-and-Margin

Upvotes: 1

Related Questions