CODEWITHSUNDEEP
htmlcss
ritK
ritK

Reputation: 115

How to set size for div when the fonts are all set in em?

I want to create a page using only "em" for font size.

The page is going to have a grid (tiles) with each cell having one image with some text above and below the image. The images are all in 200px X 200px in size. The Grid Cell would be somewhat larger than the image to accommodate the text areas.

How should I go about setting the height and width of the Div and Img tag, given that I want to rely only on "em" and not "px" for font size.

Upvotes: 0

Views: 70

Answers (1)

Connor
Connor

Reputation: 1855

em is a relative unit of measurement that inherits its value from the font size of the parent element, so to apply consistent widths to your img elements using em you'll need to define a font size somewhere in your document structure using a measurement in px and inherit from that.

For reference's sake, where 1em equals 16px, an image with a width of 200px would be 12.5em wide- 200 / 16.

You'll want to specify your own measurement in px at least once in any case to ensure cross-browser compatibility. Not every browser uses the same default font size and it's possible that users have manually changed the default font size of their browser. If you rely on defaults, you very likely won't get consistent results, and it will be detrimental to your grid design.

Upvotes: 2

Related Questions