Text line height design in DIV block

 The text line height in the DIV block can be adjusted. Why should the text line height in the DIV block be adjusted? The reason is very simple, because you need to adjust the line height that is most suitable for reading, so that readers can read easily. For example, try to put a larger font in the default DIV block . It is likely that different lines of text will stick together or To avoid the overlap phenomenon, web designers can use the line-height property of CSS to adjust the text line height of the DIV block to make the overall visual effect more comfortable and improve the browsing quality of the web page.

CSS line-height property syntax

line-height: line height setting value;

The line height setting value can use the default normal, number + unit (such as 25px), percentage (%) or inherit (inherited from the line height setting value of the parent layer). For detailed setting methods, please refer to: CSS line-height Set the height of the font range (line spacing) .

Example of text line height design in DIV block

<style type="text/css">
<!--
#DIV_A{
    margin-bottom:10px; //Upper margin, see: CSS margin properties and usage examples
    border:1px #ccc solid; //Block border , See: CSS border border
    padding:10px; //Block padding , see: CSS padding padding properties and usage examples
}
#DIV_B {
    border:1px #ccc solid;
    line-height:30px;　//Set text line height
    padding:10px;
}
-->
</style>
<div id="DIV_A">This is the first line of text, this DIV has not yet set the text line height<br>This is the second line of text</div>
<div id ="DIV_B">This is the first line of text. The text line height of this DIV is set to 30px. <br>This is the second line of text</div>

The actual effect of the example

This is the first line of text, this DIV has not yet set the text line height,
this is the second line of text

This is the first line of text. The text line height of this DIV is set to 30px.
This is the second line of text

We have prepared two sets of DIV blocks in the example . The first DIV block (DIV_A) uses the default text line height, so the distance between lines is relatively close. The second DIV block (DIV_B) The line-height property is used to modify the default line height of the DIV block to 30px, which increases the distance between the lines. This is the basic technique of the text line height design in the DIV block, and it should be adjusted Why is it more suitable? There is no standard. It is best to determine the reading comfort of the entire webpage article.