css中行间距怎么设置

在css中,可以通过行高属性line-height来设置行间距,语法格式“line-height:间距值;”。Line-height属性的值可以是相对数值,也可以为绝对数值或者具体的数字;line-height的值越大,那么行间距就越高。

在css中,可以通过行高属性line-height来设置行间距,语法格式“line-height:间距值;”。Line-height属性的值可以是相对数值,也可以为绝对数值或者具体的数字;line-height的值越大,那么行间距就越高。

css中行间距怎么设置

本教程操作环境:windows7系统、CSS3&&HTML5版、\ N 2 4 oDell G3电脑。

在css中并没有直接可以设置行间距的属G H 8 G E j k d S性,所P p J { ?以我们就需要; | 2 A = W \ b借助行高line-height来设置行间6 v I O :距,行高line-height的值越大,那么行间A a K X b r = H |距就越高。

line-heigE * U ] 1ht属性用于设置行使用的空间量,即行间的距离。

注:line-height属性不允许使用负值2 K ; m V h B +

该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元8 b 1素中基线之间的最小距离而不是最大距离。

属性值:

  • normal 默认。设置合理的行间距。

  • number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。

  • length 设置固定的行间距。

  • % 基于当前字体尺寸的百分比行间距。

可以看出,Line-height的值设置为具体的数字值,可以是相对数值,也可以设置为绝对数值,在静态页9 H 5 [面中,文字大小固定时常常使用绝对数值,而对于论坛和博客这些用户可以自定义字体大小的页面,通常设置为相对数值,从而,可以随着用户. Q o v \ H K { P自定义的字体大小改变相应的行间距。

示例:

&1 [ p 4l2 F u , { Y o o [t;!DOCTYPE htmlz c P P n + S>
<html>
<c c c 2 # + x nhead>
<meta charset="utf-8">
<style type="text/css">
p.small {
line-height: 90%
}
p.big {
line-hJ W R h W F 8 @eight: 200%
}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。 在大多数浏览器Z ] e 9中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落n W 3。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
</p>
<Z N o 2 _ \ Hp clasU ? ( 5 p @ E H Ys="small"&M H B 3 . \ % | Sgt;
这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。 这个段落= i q 8 b J . {拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
</p>
</body>
</html>

1.png

学习视频分享:css视频教程

以上就是css中行间距怎么设置的详细内容,更多请关注php中l X G :文网其它相关文章!g _ 8 A r 2 j 0 9

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@phpL U ` c e M A % g.cn处理

原创文章,作者:町子门户,如若转载,请注明出处:https://www.6fzz.com/12091.html

(0)
上一篇 2021年5月17日 下午11:15
下一篇 2021年5月17日 下午11:15

相关推荐

  • 在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较

    一般来说,录入数据的时候,我们都采用在一个窗体界面中,根据不同内容进行录入,但是有时候涉及主从表的数据录入,从表的数据有时候为了录入方便,也会通过表格控件直接录入。在Winform开发的时候,我们很多时候可以利用表格GridControl控件来直接录入数据;在BS的Vue&Elment前端项目中,也… …

    2021年11月18日
  • css怎么实现内容超出隐藏效果

    css实现内容超出隐藏效果的方法是,给文本内容添加text-overflow属性,例如【text-overflow:ellipsis】。text-overflow属性指定当文本溢出包含它的元素应该发生什么。

    2021年5月17日
  • 对比nushell和powershell

    这是一篇对比powershell和nushell的文章。我是powerhsell专家,又是nushell新手,若某些观点有错误欢迎斧正。 …

    编程学习 2022年1月4日
  • 如果面试官问你如何组织一个狼人杀,你会怎么回答?

    如果有人问你这样一个问题,你会怎么回答:“明天晚上8点,我们想组织一场12人局的狼人杀,假设现在是上午8点,从…

    2021年6月27日
  • 究竟是哪一类产品经理最后成为了CEO?

    我就知道不取这样的标题你们是不会戳进来看的,啊喂等等别走啊,注意这篇并不是标题党,而是作为一个接触了很多产品经…

    2021年6月27日
  • CSS编写及选择器

    设置CSS样式的方式 内联样式(行内样式) 在标签内通过style属性来设置元素的样式 <p style=”color:red;font-size:60px”><!–设置字体颜色和大小–> CSS设置样式 </p> 问题:使用内联样式,只能对一个标签生效 ​ 复用程度不高,维护起来比较麻烦 内部 …

    编程学习 2021年5月30日
  • JDK 商用正式免费、Log4j2 爆核弹级漏洞、LayUI 下线…2021 发生的 10 件大事!!

    首先祝大家新年快乐,假期都玩的开心吧? 去年栈长给大家盘点了《Java 开发行业 2020 年发生的几件大事》,2022 年来了,也必须对 2021 做个总结了,2021 年 “Java技术栈” 都有哪些值得关注的事情呢? 这篇必须看完,因为这些技术事件可能影响你未来的就业、以及公司在技术选型上的决 …

    编程学习 2022年1月4日
  • php json怎么转成数组

    php json转成数组的方法:首先创建一个PHP示例文件;然后在PHP变量中存储JSON数据;最后通过json_decode函数将JSON编码的字符串转换为数组即可。

    2021年5月18日
  • 在Vue&Element前端项目中,对于字典列表的显示处理

    在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如何使用自定义封装的字典显示处理。包括后端提供数据API、前端对API的封装,以及组件封装,然后就是界面组件的… …

    2021年10月29日
  • SaaS独角兽成长秘籍:40%法则+7步走战略

    如何判断一家 SaaS 公司是否健康? 如何打造一家 SaaS 独角兽公司? 对于这两个问题,你肯定已在各种地…

    2021年6月27日

发表评论

您的电子邮箱地址不会被公开。