How to set row height in css

The line height setting in CSS is used to set the height between lines of text in the element, set through the line-height attribute. Setting methods include: Value: fixed height (pixel or unit value) Percentage: percentage based on the font size of the parent element Unitless value: set the default value (normal) or inherit the parent element line height (inherit)

Row height setting in CSS

In CSS, line height is used to set the height between lines of text in an element. It can be set via the line-height property.

Setting method:

line-height: value;

Value type:

• Value: Fixed height expressed in pixels (px) or unit values ​​(em, rem, etc.). For example: line-height: 20px;
• Percentage: Percent based on the font size of the parent element. For example: line-height: 150%;

• Unitless value: Some special unitless values, such as:

  • normal: Set to the browser's default value.
  • inherit: Inherit the row height from the parent element.

Example:

<code class="css">/* 将段落中的行高设置为 1.5 倍的字体大小 */
p {
  line-height: 1.5em;
}

/* 将标题中的行高设置为 20 像素 */
h1 {
  line-height: 20px;
}</code>

Note:

• row height The setting is relative to the font size , so when using percentage or unitless values, it will automatically adjust to the font size.
• If the line height is not specified, the browser will use the default value, which is usually about 1.2 times the font size.
• Line height not only affects the appearance of text, but also affects the vertical alignment of elements and the spacing between elements.

The above is the detailed content of How to set row height in css. For more information, please follow other related articles on the PHP Chinese website!