Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is the span's line-height useless?

Tags:

html

css

First, let's see a piece of code:

div { width:200px; height:200px; border:1px solid black; line-height:200px; }  span { line-height:1.7;  }
<div><span>123<br>456<br>789<br>000</span></div>

Why is the span's line-height unused?

The line-height is still 200px, but when we set span's display property to inline-block, the line-height of the span is used?

See below:

div { width:200px; height:200px; border:1px solid black; line-height:200px; }  span { display:inline-block; line-height:1.7; }
<div><span>123<br>456<br>789<br>000</span>
like image 754
SKing7 Avatar asked Aug 06 '12 13:08

SKing7


People also ask

Does span line height work?

Line height doesn't work… I even try doing line-height:8px for testing purposes but, noticed it doesn't work inside that span block.

What is the purpose of the line height attribute?

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

Is line height 2 valid?

For starters, double is an invalid option. Yup, tricked you! The only keyword value that line-height accepts is normal . Now, 2em will certainly give you double-spaced text for the element that it's applied to, but so will 200% .

Can you have a negative line height?

Summary. The line-height property specifies the height of an inline block level element. The value of the line-height property cannot be negative.


2 Answers

Block layouts, like div elements are by default, are made up of a vertical stack of line boxes, which never have space between them and never overlap. Each line box starts with a strut which is an imaginary inline box the height of the line-height specified for the block. The line box then continues with the inline boxes of the markup, according to their line heights.

The diagram below shows the layout for your first example. Note that because 1.7 times the font-height is much less than the height of the strut, the line height is determined by the height of the strut, since the line box must wholly contain its inline boxes. If you had set the line height on the span to be greater than 200px, the line boxes would be taller, and you would see the text move further apart.

Layout with span as inline

When you make the span inline-block, the relationship between the div and the span doesn't change, but the span gains it's own block layout structure with its own stack of line boxes. So the the text and the line breaks are laid out within this inner stack. The strut of the inner block is 1.7 times the font-height, i.e., the same as the text, and the layout now looks as below, so the text lines are positioned closer together, reflecting the line-height setting of the span.

(Note that the two diagrams are on different scales.)

Layout with span as inline-block

like image 137
Alohci Avatar answered Sep 26 '22 01:09

Alohci


This is by design. There are two element types within an HTML document: block and inline. Inline elements don't interrupt the flow of the document, but block elements do.

Block elements, as the name suggests, block out an area on the page which contains some content. Some examples of block elements are: <p> and <div>. 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. As you've already seen, you can tell the browser to treat an inline element as a block element to allow you to apply heights to them.

An example of this can be seen when using <li> elements to create menus. <li>s are block elements. If you create a list, the items will display vertically on the page, ensuring that each list item appears below the previous one. However, if you apply display: inline; to the list items, they will now appear horizontally.

like image 30
John H Avatar answered Sep 23 '22 01:09

John H