Values. 7.3.3 行高的计算与继承. The following is a guest post by Jesús Ricarte, a front-end developer and volunteer translator for A List Apart in Spanish.I’m very glad to have him writing here today about line heights and using math in CSS! はじめに. 今回は、 文字の大きさ(font-size)が20px 、 line-heightが30px です。 したがって、上下の余白はそれぞれ、（ 30px – 20px ）÷2 = 5px になります。 数値のみで指定. The line-height CSS property sets the height of a line box. Using Margin: When modifying the gap between the element and the element. This is default: Play it » number: A number that will be multiplied with the current font-size to set the line height: Play it » length: A fixed line height in px, pt, cm, etc. 2008年06月17日.
结果： 第二种情况：行高为 50px 和文字高度为 20px 情况：. line-height属性的细节 与大多数CSS属性不同，line-height支持属性值设置为无单位的数字。 有无单位在子元素继承属性时有微妙的不同。 语法 line-height: normal |
On the left panel, click on or in the toolbar of the block, click on the HTML button. 最后一句不太懂，按照我的测试，如果设置height为20px，line-height为50px时，文字应该处于元素底部或者超出元素底部范围，假设文字的font-size为30px；line-height所占区域分配是字体上下各10px；字体本身30px；然后由于高度为20px，字体会在三分之一高度处被截取 On inline elements, this property specifies the height that is used in the calculation of the line box height. So simple that most of us are convinced to fully understand how they work and how to use them. CSSのline-heightの値には、単位は指定せず、数値のみ記述するのが一般的かと思います。 しかし、line-height:1.5 も line-height:1.5em も line-height:150% も指定した要素の表示は同じです。 なぜ単位を指定しないのか、実際の表示結果から確認します。 結果 そう、これは兄弟要素であるpのline-height: 1.8;分の余白が追加されているためである…。 じゃあ実際にそのline-height分の余白を20pxから引いてあげればいいよね！つまり、20pxから6px引いた、14pxをh1のmargin-bottomにしてあげればOK！ line-height 是行高的意思，它决定了 元素中文本内容的高度 ， height则是定义 元素自身的高度 。. CSSのline-heightの値には、単位は指定せず、数値のみ記述するのが一般的かと思います。 しかし、line-height:1.5 も line-height:1.5em も line-height:150% も指定した要素の表示は同じです。 なぜ単位を指定しないのか、実際の表示結果から確認します。 3.line-height可以使用一个百分比的值body{line-height:120%;} 4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;} 5.line-height也可以被定义为纯数字， body{line-height:1.2} 缩写line-height 那5种line-height写法，可以在font属性中缩写。 p { font-size: 16px; line-height: 20px; height: 20px; } 给p的line-height和height均为20px后，如果设置字体为宋体， 文字的确在p标签中居中，上下各距2px。但是如果设置字体为微软雅黑，那么文字并不居中，距离上边3px，下边2px。这是为什么？如何兼容？ 显示全部 Although we can apply any CSS Unit to line-height, a unitless 1.5 value is the most recommended way to handle it. Desktop browsers use a default value of roughly 1.2, depending on the element's font-family. A normal line height. You can try to run the following code to learn the difference between height and line height: Live Demo 7.3 行高：line-height属性[2]——行高的计算与继承. OK, I Understand The line-height property defines the amount of space above and below inline elements. On block-level elements, it specifies the minimum height of line … normal - Depends on the user agent. 以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。 It's commonly used to set the distance between lines of text. line-height 属性设置行间的距离（行高）。 注释： 不允许使用负值。 说明.
“Line height vs Margin” is published by nana Jeon in Design & Code Repository.
这时候文字会居中显示（ 对于文字为什么会居中显 … That is, elements that are set to display: inline or display: inline-block.This property is most often used to set the leading for lines of text.. p { line-height: 1.5; } The line-height property can accept the keyword values normal or none as well as a number, length, or percentage. But it’s not. div {line-height:6px; } div {line-height:10.5; } 注意：1.用line-height只对文字起作用 对于图片时失效 2.用dreamweaver 可以看到即时的line-height 的效果 3.用line-height 时可以使用负值 On block-level elements, it specifies the minimum height of line … Line-height and vertical-align are simple CSS properties. It is the space between the lines of two paragraphs. line-height: 高さ; 行の高さを指定する 「何もない空間がデザイン性と可読性をアップさせる」では余白を無くしました。その無くした余白を指定していきます。 余白を指定する方法は何種類あります。