Menu
A block elements height is affected by the contents font size right?
It's best to just show you what I mean, look at this example fiddle
If you increase the font size of the class .p inside the div, the div's height increases too, why is this?
782
The font-size property specifies the size of the font, no matter what unit is used. The size of a font can be characterized as the height of the font, but even this is just a loose and pragmatic description; characters may extend above and below the levels defined by the size of the font.
Line Height and Font Size # Smaller type tends to need more line height, not less. A generous line height helps the eye to recognize small word shapes more easily, and it encourages horizontal motion when the eye gets tired of reading small text. Left: A line height set at 150% is a bit too tight on an iPhone.
Points dictate the height of the lettering. There are approximately 72 (72.272) points in one inch or 2.54 cm. For example, the font size 72 would be about one inch tall, and 36 would be about a half of an inch. The image shows examples of font sizes ranging from 6 pt to 84 pt.
The font-size property specifies the size of the text. It can be specified as a fixed size in various units, a percentage, or as a predefined keyword. The "px" unit lets you size font in terms of pixels, which is the unit also used to size images and other elements.
That's because the font size of the div decides where the base line for the text is, and the span is placed on that base line.
Increasing the font size of the div makes the distance above and below the base line higher. It's the content of the span inside that gives the element size, so it's only the distance above the base line that affects the size, not the distance below the base line, so you will be see text being pushed down, but there is no corresponding space below the text.
84
Because you have no set height on the div.
This means the div will expand to fit its contents, in this case the p element.
If you do not specify a height it will default to height:auto.
32
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
