Menu
I noticed that line-height seems to affect blocks. Its strange to me, that i never noticed this disturbing effect before.
The problem is that it will affect blocks, even if they do not contain text at all.
I created a JSFiddle to demonstrate the issue. If you set line-height to 0, the grey area will no longer exceed that of the image inside the container.
Why is this happening and is there a clean way to prevent it?
486
It's important to stress that line height is not the space between lines of text—as it is often mistakenly thought of—but the space from the baseline of one line of text to the baseline of the next line of text. So, a font size of 16px would require a line height of 24px or higher.
If the value of the line-height property is smaller than the value of the font-size , text may overflow the element, and text on one line may overlap text on another line above or below it. It is often convenient to set the value of the line-height in the font shorthand property.
Change the line spacing in a portion of the document Select the paragraphs you want to change. Go to Home > Line and Paragraph Spacing. Choose the number of line spaces you want or select Line Spacing Options, and then select the options you want under Spacing.
You can apply height, line-height and other CSS properties to these elements in order to change the size of the block, and subsequently, the flow of the document. Inline elements take up the minimum amount of space required to render them, which means setting widths and heights on these elements will have no effect.
The line-height value affects rendering even in the absence of text, since “'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties.” (CSS 2.1 about line-height.)
But that’s really not the cause here. Images are by default rendered inline, meaning that they act as big (or maybe small) letters, sitting on the baseline of text. The details are complicated, but by setting line-height considerably smaller than font size, you put baselines closer to each other and the space vanishes.
Another way to remove the disturbing effect is to set display: block on the img element. Then the element will be formatted in a different way.
Yet another way is to set vertical-align: bottom on the img element.
192
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
