垂直高度的 CSS

在CSS中，我们可以使用不同的属性和值来控制元素的高度。这些属性和值可以让我们控制元素的高度，实现一些特定的布局要求。

height属性

height属性用于设置元素的高度，可以使用像素、百分比、em等单位。

示例代码：

div {
    height: 100px; /* 设置元素高度为100像素 */
}

div {
    height: 50%; /* 设置元素高度为父元素的50% */
}

line-height属性

line-height属性用于设置元素中文本行的高度，可以使用像素、百分比，具体计算公式为：行高 = height / 行数。

示例代码：

p {
    height: 50px;
    line-height: 25px; /* 设置行高为25像素 */
}

p {
    height: 100px;
    line-height: 200%; /* 设置行高为200% */
}

vertical-align属性

vertical-align属性用于设置元素的垂直对齐方式，可以使用top、middle、bottom等值。

示例代码：

img {
    vertical-align: middle; /* 将图像垂直居中 */
}

margin和padding属性

margin和padding属性也可以用来控制元素的垂直高度，我们可以用这两个属性来控制元素的外部边距和内部间距。

示例代码：

div {
    height: 200px;
    margin-top: 50px; /* 上外边距为50像素 */
    padding-top: 30px; /* 上内边距为30像素 */
}

overflow属性

overflow属性用于设置可溢出元素的溢出行为，包括visible、hidden、scroll和auto等值。

代码示例：

div {
    height: 150px;
    overflow: auto; /* 在内容超出时显示滚动条 */
}

以上就是垂直高度的CSS相关属性和值介绍。掌握这些属性和值，我们可以轻松地实现各种布局效果。