DAY 19
3

## 話說 line-height 是什麼呢？

### line box 高度計算

Visual formatting model details

As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:

1. The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)
2. The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
3. The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)

1. line box 中每個包含的 inline 元素高度，對於替換元素指的是它的 margin box 高度，對於 inline boxes 來說指的是它的 `line-height`
2. 每個 inline-level box 元素所設定的 `vertical-align` 數值。
3. line box 的高度會取決於最高的 box 和最低的 box 位置。

### line-height

#### 實例應用數值計算：

``````div {line-height：1.2; font-size：10pt} / * number * /
div {line-height：1.2em; font-size：10pt} / * length * /
div {line-height：120％; 字體大小：10pt} / *百分比* /
``````

Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for 'normal' between 1.0 to 1.2.

### 1 則留言

0
JinWen
iT邦新手 5 級 ‧ 2019-10-05 08:06:51