零基础建站培训介绍

当前位置:

CSS设置文字行高行间距的方法

要使得每行的文字一定的间距距离所以可以通过line-height样式实现。接下来通过DIV CSS实例实现字体文字上下间距。

为了观察到行距设置效果,新建两个div盒子对象,分别div命名为“.divcss5-a”和“.divcss5-b”。

1、div+css实例完整HTML代码:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css行间距实例</title>
<style>
.divcss5-a{ line-height:22px}/* css 注释说明:设置行距行高22px */
.divcss5-b{ line-height:40px}/* 设置行距行高22px */
</style>
</head>
<body>
<div class="divcss5-a">
我被设置行高22px<br />
我行距为22培训<br />
占位内容
</div>
<div class="divcss5-b">
我被设置行高40px<br />
我行距为40培训<br />
DIVCSS5占位内容
</div>
</body>
</html>

设置了两个盒子分别css行高间隔设置为22px和40px,大家可以复制以上代码进行实践观察效果掌握css设置对象内字体文字上下行间距。掌握设置行间距行高代码是什么。

2、css div行高行间距效果截图

CSS设置文字行高行间距

3、总结
要实现上下换行文字行间距行高样式其实我们只用对文字所在对象设置line-height样式即可,一般行距值设置大于14px以上即可,根据css字体大小,css行高值不能小于字体值,不然行距设置值比字体大小值小后字体会重叠一部分,形成不兼容效果。

上一课: 下一课:

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。
  • HTML中,给一个DIV添加一个边框,那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度,那么我们如何让边框不占宽度和高度呢?(相关
  • CSS中可以给一个DIV设置背景图片,甚至可以设置背景的样式和位置。(相关教程:CSS3视频教程)控制背景图片位置:background-position:水平方向
  • 在自己做网站时,为了显示效果,我们需要对某些区块设置圆角边框,这时,我们需要用到CSS的border-radius属性,通过border-radius属性就可以轻松设置
  • 问题:在HTML中元素分为块状元素和行内元素,块状元素的外边距和内边距我们分别使用margin\padding属性来设置,那么行内元素可以设置margin\paddi
  • 1、CSS3设置文字一个阴影在CSS3中使用text-shadow属性来给文字添加阴影效果[cce_html]h1{text-shadow: 5px 5px 5px #FF0000;}[/c
  • 如何在网页文字后加水平线?在HTML中,定义水平线可以使用水平线标签HR标签来写一个水平线。基本写法:[cce_html]<hr />[/cce_html]并且
  • 有时候,我们需要对网页某个区域的文字竖排,竖向排列。横向排列,在网站制作培训中,经常用到。对于竖排,一时间找不到思路了,呵呵,其实和横排一样
  • 图片上的文字如何用ps除去呢?下面小编向大家分享一个比较简单的方法,主要运用ps中的移动工具。不过该方法对于纯色背景的文字比较好用,而处理那些复
  • 要使得每行的文字一定的间距距离所以可以通过line-height样式实现。接下来通过DIV CSS实例实现字体文字上下间距。为了观察到行距设置效果,新建两
  • 我们来介绍下css 字间距,使用css来控制字与字之间距离,也叫css字间距方法。使用到的css样式属性单词text-indent抬头距离,letter-spacing字与字
  • 做网站时,避免不了网站上有大量的图片。网站上的图片显示就需要使用img图片标签。HTML img图片标签写法[cce_html]<img src="图片地址" alt=
  • 在网站制作过程中经常需要使用到让div进行水平和垂直居中的技术。现在我们就来谈谈如何实现让div水平和垂直居中。Div标签水平居中方法Div
  • 通常所说的META标签,是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、