介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>使用数值来设置行间距& lt;/title>
& lt;风格类型=拔谋?css"比;
p。小{
行高:0.5
}
p。{大
行高:2
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; p>
这是拥有标准行高的段落。默认行高大约是1。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。
& lt;/p>
类& lt; p=皊mall"祝辞
这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。
& lt;/p>
类& lt; p=癰ig"祝辞
这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。
& lt;/p>
& lt;/body>
& lt;/html> & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>使用数值来设置行间距& lt;/title>
& lt;风格类型=拔谋?css"比;
p。小{
行高:10 px;
}
p。{大
行高:30 px
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; p>
这是拥有标准行高的段落。在大多数浏览器中默认行高大约是20 px。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。
& lt;/p>
类& lt; p=皊mall"祝辞
这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。
& lt;/p>
类& lt; p=癰ig"祝辞
这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。
& lt;/p>
& lt;/body>
& lt;/html>
这篇文章主要介绍css中怎么设置行间距,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
首先我们先了解一下<强>什么是行高强,在css中又是如何设置行高,进而设置和调整行间距。
简单来说:行高类似于单线本,单线本里是用一行一行线条隔开的空间,线与线之间的距离就是行高。网页中的文本文字实际上是写在一条看不见的线中的,然后会默认在行高中垂直居中显示。那么在css中是如何设置行高的?在css中可以通过行高属性来设置行高、下面我们来简单介绍一下css行高属性吧。
<强> css行高属性会影响行框的布局,是用来设置行与行之间的距离(行高)的,不允许使用负值。在应用到一个块级元素的时候,它定义了该元素中基线之间的最小距离而不是最大距离。
行高与字体大小的计算值之差(在css中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
下面我们来看看css行高属性可能会用的的值:
正常:设置合理的行间距,默认值。
号码:设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
长度:设置固定的行间距。
%:基于当前字体尺寸的百分比行间距。
继承:规定应该从父元素继承行高属性的值。
注:所有浏览器都支持行高属性。
我们来用<>强实例介绍行高属性是如何设置和调整行间距强,下面会举例介绍设置行间距的方法:
1,使用数值来设置行间距
效果图:
2,使用像素值设置行间距
效果图:
3,使用百分比设置行间距
行高属性指定了一个百分数,则会相对于字体去计算行高。
