Home > Article > Web Front-end > How to control row height with CSS?
In CSS, the line height can be controlled through the line-height attribute, which can set the distance (line height) between lines through percentages, numbers, pixel values, etc.; the syntax "line-height: Attribute value;", the attribute value can be set to percentage value, number, pixel value and normal keyword.
The operating environment of this tutorial: Windows 10 system, CSS3, this article is applicable to all brands of computers.
css line-height property
The line-height property sets the distance between lines (line height).
Note: Negative values are not allowed.
This property affects the layout of the line box. When applied to a block-level element, it defines the minimum distance between baselines in that element rather than the maximum distance.
The calculated difference between line-height and font-size (known as "line spacing" in CSS) is divided into two halves and added to the top and bottom of a line of text content. The smallest box that can contain this content is a line box.
Syntax:
line-height:属性值;
Possible attribute values
normal Default. Set reasonable line spacing.
number Set a number that will be multiplied by the current font size to set the line spacing.
length sets fixed line spacing.
% Percent line spacing based on the current font size.
Example:
这是一个标准行高的段落。
这是一个标准行高的段落。
大多数浏览器的默认行高约为110%至120%。
这是一个更小行高的段落。使用百分比设置
这是一个更小行高的段落。使用百分比设置
这是一个更小行高的段落。使用百分比设置
这是一个更小行高的段落。使用百分比设置
这是一个更大行高的段落。使用百分比设置
这是一个更大行高的段落。使用百分比设置
这是一个更大行高的段落。使用百分比设置
这是一个更大行高的段落。使用百分比设置
这是一个更小行高的段落。使用像素值设置
这是一个更小行高的段落。使用像素值设置
这是一个更小行高的段落。使用像素值设置
这是一个更小行高的段落。使用像素值设置
这是一个更大行高的段落。使用像素值设置
这是一个更大行高的段落。使用像素值设置
这是一个更大行高的段落。使用像素值设置
这是一个更大行高的段落。使用像素值设置
这是一个更小行高的段落。使用数值来设置
这是一个更小行高的段落。使用数值来设置
这是一个更小行高的段落。使用数值来设置
这是一个更小行高的段落。使用数值来设置
这是一个更大行高的段落。使用数值来设置
这是一个更大行高的段落。使用数值来设置
这是一个更大行高的段落。使用数值来设置
这是一个更大行高的段落。使用数值来设置
For more programming-related knowledge, please visit: Programming Teaching! !
The above is the detailed content of How to control row height with CSS?. For more information, please follow other related articles on the PHP Chinese website!