css line of high usage summary

css does not provide a direct way to set line spacing, it can only be indirectly set high by setting the line spacing, line spacing greater the higher the greater the row, with a high line-height setting rows.

.p1 {
    /* 设置行高 */
    line-height: 40px;
}

Line-height single line similar to this use at school, this is a single-line line line by line, the distance between the line and the line is the row height, the text in the page is actually written in an invisible line, and the text will be High vertical line centered by default.

行间距 = 行高 - 字体大小

line-height type of value can be set:

Directly receiving a size, such as: line-height: 20px;
You can specify a percentage, such as: line-height: 100%;
You can directly specify a number without units, such as: line-height: 1.5;

/* 行间距 = 40px(行高) - 20px(字体大小) 为 20px */
.p1 {
    /* 字体大小 */
    font-size: 20px;
    /* 行高为 40px */
    line-height: 40px;
}

/* 行间距 = (200% * 20px(字体大小))(行高) - 20px(字体大小) 为 20px */
.p1 {
    /* 字体大小 */
    font-size: 20px;
    /* 行高 = 200% * 20px(字体大小) 为 40px */
    line-height: 200%;
}

/* 行间距 = (2 * 20px(字体大小))(行高) - 20px(字体大小) 为 20px */
.p1 {
    /* 字体大小 */
    font-size: 20px;
    /* 行高 = 2 * 20px(字体大小) 为 40px */
    line-height: 2;
}

For single line of text, line height may be set to the same height and the parent element, so that a single line of text can be centered vertically in the parent element, attention must be single line of text

.box1 {
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    /* line-height 等于 height，单行文本就会在父元素内垂直居中 */
    line-height: 200px;
}
<div class="box1">
    <a href="#">蜀道之难，难于上青天！</a>
</div>

May be specified in the font attribute row height, add "/ Height" after the font size, the value is optional, if not specified the default value is used.

/* 格式 */
.p1 {
    /* 在字体后面加 “/50px”，表示行高 */
    font: bold italic normal 30px/50px 微软雅黑, 宋体, Serif;
}

/* 错误的写法 */
.p1 {
    /* 在此设置行高，不会起作用，相反font的"/50px"会起作用 */
    line-height: 100px;
    /* 在字体后面加 “/50px”，表示行高 */
    font: bold italic normal 30px/50px 微软雅黑, 宋体, Serif;
}

/* 错误的写法 */
.p1 {
    /* 在此设置行高也不会起作用 */
    line-height: 100px;
    /* 在字体后面未设置行高，会使用默认值而不是用上面设置的行高 */
    font: bold italic normal 30px 微软雅黑, 宋体, Serif;
}

/* 正确的写法 */
.p1 {
    /* 在字体后面未设置行高 */
    font: bold italic normal 30px 微软雅黑, 宋体, Serif;
    /* 行高 */
    line-height: 100px;
}

/* 正确的写法 */
.p1 {
    /* 在字体后面设置行高 "/100px" */
    font: bold italic normal 30px/100px 微软雅黑, 宋体, Serif;
}

css line of high usage summary

Guess you like