Home >Web Front-end >CSS Tutorial >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:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p.small1 {line-height:70%;} p.big1 {line-height:200%;} p.small2{line-height: 10px} p.big2{line-height: 30px} p.small3{line-height: 0.5} p.big3{line-height: 2} </style> </head> <body> <p> 这是一个标准行高的段落。<br> 这是一个标准行高的段落。<br> 大多数浏览器的默认行高约为110%至120%。<br> </p> <p class="small1"> 这是一个更小行高的段落。使用百分比设置<br> 这是一个更小行高的段落。使用百分比设置<br> 这是一个更小行高的段落。使用百分比设置<br> 这是一个更小行高的段落。使用百分比设置<br> </p> <p class="big1"> 这是一个更大行高的段落。使用百分比设置<br> 这是一个更大行高的段落。使用百分比设置<br> 这是一个更大行高的段落。使用百分比设置<br> 这是一个更大行高的段落。使用百分比设置<br> </p> <p class="small2"> 这是一个更小行高的段落。使用像素值设置<br> 这是一个更小行高的段落。使用像素值设置<br> 这是一个更小行高的段落。使用像素值设置<br> 这是一个更小行高的段落。使用像素值设置<br> </p> <p class="big2"> 这是一个更大行高的段落。使用像素值设置<br> 这是一个更大行高的段落。使用像素值设置<br> 这是一个更大行高的段落。使用像素值设置<br> 这是一个更大行高的段落。使用像素值设置<br> </p> <p class="small3"> 这是一个更小行高的段落。使用数值来设置<br> 这是一个更小行高的段落。使用数值来设置<br> 这是一个更小行高的段落。使用数值来设置<br> 这是一个更小行高的段落。使用数值来设置<br> </p> <p class="big3"> 这是一个更大行高的段落。使用数值来设置<br> 这是一个更大行高的段落。使用数值来设置<br> 这是一个更大行高的段落。使用数值来设置<br> 这是一个更大行高的段落。使用数值来设置<br> </p> </body> </html>
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!