首页 >web前端 >css教程 > 正文

css怎么修改行间距

原创2021-05-17 17:06:0501163

css修改行间距的方法:首先新建一个html代码页面;然后在html页面输入两个<div>同时设置一些文字;接着对其中一个<div>添加一个class类为big用于设置行高;最后使用line-height设置big类的行高即可。

本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

打开html开发工具,新建一个html代码页面,然后在这个html页面输入两个<div>同时设置一些文字,对其中一个<div>添加一个class类为big用于设置行高。

创建<div>代码:

<div>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
</div>
<br />
<div class="big">
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
</div>

7335e94075fd1776a16ebbb80e5842b.png

设置行高。在<title>标签后面创建一个<style>标签,然后使用line-height设置big类的行高。

css样式代码:

<style type="text/css">
.big{
line-height: 300%;
}
</style>

1ba7b8c321eada0d1ebc336e32d4f70.png

保存html页面,使用浏览器打开,即可看到浏览器页面上含有big类的div标签里的行间距变大了。

25175a471893e734459b780ba6eb613.png

推荐:《css视频教程

以上就是css怎么修改行间距的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

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

  • 相关标签:css
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • CSS视频教程-玉女心经版CSS视频教程-玉女心经版
  • HTML+CSS网页基础HTML+CSS网页基础
  • CSS3 极速入门CSS3 极速入门
  • 玩转CSS Flexbox弹性盒子布局(2021新课)玩转CSS Flexbox弹性盒子布局(2021新课)
  • 让布局像5G一样快:CSS Grid网格布局让布局像5G一样快:CSS Grid网格布局
  • 视频教程分类