css设置行间距的三种方法
css设置行间距的三种方法
1、使用数值来设置行间距
CSS
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用数值来设置行间距</title><style type="text/css">p.small {line-height: 0.5}p.big {line-height: 2}</style></head><body><p>这是拥有标准行高的段落。 默认行高大约是 1。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。</p><p>这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。</p><p>这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。</p></body></html>2、使用像素值设置行间距
CSS
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用数值来设置行间距</title><style type="text/css">p.small {line-height: 10px;}p.big {line-height: 30px}</style></head><body><p>这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 20px。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。</p><p>这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。</p><p>这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。</p></body></html>3、百分比设置行间距，line-height属性指定了一个百分比，它将相对于字体来计算行高。
CSS
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用数值来设置行间距</title><style type="text/css">p.small {line-height: 80%;}p.big {line-height: 200%;}</style></head><body><p>这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。</p><p>这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。</p><p>这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。</p></body></html>以上就是css设置行间距的三种方法，希望对大家有所帮助。
本文教程操作环境：windows7系统、css3版，DELL G3电脑。
css设置行间距的三种方法相关推荐
- 在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
- CSS画心形的三种方法，超级简单
CSS画心形的三种方法,超级简单 一.一颗div一颗心 用一个div画出一个心,核心的方法就是使用伪元素 首先,我们在页面上先写出一个div 使用CSS,将这个div变为一个橘红色的正方形: 接着我们 ...
- css画心形原理,CSS画心形的三种方法
下面,介绍三种CSS画心形的方法.实现过程都非常简单,保证你一看就会. 1.一颗div一颗心 用一个div画出一个心,核心的方法就是使用伪元素. 首先,我们在页面上先写出一个div: 使用CSS,将这 ...
- Allegro自定义设置快捷键的三种方法
Allegro自定义设置快捷键的三种方法: 1.在Allegro PCB editor 命令窗口直接定义 2.通过修改用户变量env文件来设置快捷键 3.定义笔画为快捷键 1.在Allegro PCB ...
- bluehost 虚拟主机 php.ini,BlueHost主机设置伪静态的三种方法
伪静态是相对真实静态来讲的,真实静态会生成一个html或htm后缀的文件,访客能够访问到真实存在的静态页面:而伪静态则没有生成实体静态页面文件,而仅仅是以.html一类的静态页面形式.为了增加对搜索引 ...
- html+css实现三角形的三种方法
一.淘宝网的三角形实现 <!DOCTYPE html> <html><head><meta charset="utf-8" />&l ...
- CSS清除浮动的三种方法
第一种:使用div空标签法 <head> <style>.left, .right {float: left;width: 200px;height: 200px;backgr ...
- css设置透明度的两种方法
一.css rgba()设置颜色透明度 语法: rgba(R,G,B,A); RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写.RGBA 颜 ...
- 引入CSS样式表的三种方法
1.行内式 <标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名> 该语法中style是标记的属性,实际上任何H ...
最新文章
- PAGER set to stdout_Python || 学习笔记(4):dictamp;amp;set
- HDFS数据迁移解决方案之DistCp工具的巧妙使用
- redis中的事务、lua脚本和管道的使用场景
- php去除中间空格,php删除字符串中间空格的方法
- leetcode 506. 相对名次（Java版）
- Linux下git的使用——将已有项目放到github上
- 进程的创建与可执行程序的加载
- QGraphicsProxyWidget paintEvent（from 1+1 =2）
- ds排序--希尔排序_排序算法 - 希尔排序分析及优化
- paip.获取地理位置根据Ip
- AlphaGo Zero 设计思路及应用实践（上）
- python实现组合优化
- 20.6.5算法心得 一元二次方程解法
- 相似矩阵和相似对角化
- 分割视频的方法有哪些？
- threejs 特效 自定义发光围栏，发光墙体，闪烁动画
- 高速光耦（PS8101，TLP112A，TLP109）基本工作原理应用实例
- Hibernate_基于Annotation的使用_OneToOne_Demo(不维护关系那方(mappedBy=person))
- 网络计划经典例题讲解
- 三角Puzzle受力分析