html怎么设置p标签行间距

编程之家收集整理的这篇文章主要介绍了html怎么设置p标签行间距编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

html怎么设置p标签行间距

HTML设置p标签行间距的方法是,给段落文字添加line-height属性,并且设置合理的行间距数值即可,例如【p.small {line-height:70%;}】,表示设置行间距为当前字体的百分之70。

本文操作环境windows10系统HTML 5、thinkpad t480电脑。

我们设置p标签的行间距其实是非常简单的,因为在CSS中有一个现成的属性line-height,这是由于该属性才让行间距的设置如此简单。可能很多同学不太清楚该属性,下面就让我们来一起看看该属性吧。

line-height属性是用来设置百分比计的行高的。

属性常用属性值有如下几种:

下面我们来一起看看代码示例:

<!DOCTYPE HTML>
<HTML>
<head>
<Meta charset="utf-8"> 
<Title>编程之家网(www.jb51.cc)</Title> 
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
大多数浏览器行高约为110%至120%。<br>
</p>

<p class="small">
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
</p>

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

</body>
</HTML>

运行效果如下图所示:

00c196dc25ead8ffcdcf2188efcedbc.png

相关推荐:html教程

总结

以上是编程之家为你收集整理的html怎么设置p标签行间距全部内容,希望文章能够帮你解决html怎么设置p标签行间距所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

HTML文章

html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;登录测试&lt;/title&gt; &lt;link rel="stylesheet" href="index1.css"&gt;&lt;/head&gt;&lt;body&gt; &lt;section id="content"&gt; &l
(1)新建HTML文件。写入代码。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;(2)网页头部导航栏的一堆按钮实际是由&lt;ul&gt;和&lt;li&gt;标签制作..
快手网页版的指纹分析,好比十八罗汉。
大家好,我是小周,今天分享JavaScript中有意思的dom操作,学完本文,你将玩转dom,文末有福利哦,让你上百度热搜,前提是学习完本文哈,原创不易,如果觉得文章写的不错,还请点赞关注支持我呀,你的支持是我创作的动力............
文章目录一. 案例: 表白墙 (使用模板引擎)1. 首先创建 maven 项目2. 创建好模板文件3. 使用数据库存储数据.创建一个类用于数据库连接4. 使用 监视器 来初始化 Thymeleaf5. 编写 Servlet 代码① 重写 doGet 方法② 重写 doPost 方法③ 实现 load 方法④ 实现 save 方法6. 注意事项7. 部署之后 运行截图二. 案例: 在线相册 (使用模板引擎)1. 首先创建 maven 项目2. 创建好模板文件3. 这是通过访问文件夹里的图片的4. 使用 监视器
使用框架OKHTTP (网络请求)GSON (JSON解析)GLIDE (图片选择器)使用封装类BaseActivity (Activity基类)BaseFragment (Fragment基类)OkHttpUtils (网络请求工具类)Nvgation (导航条Nvgation)使用组件TextView (文本组件)EditText (输入框组件)Button (按钮组件)ListView (列表组件).
目录一·登录注册代码以及效果二·页面跳转的方式以及他们的区别三·其他一·登录注册代码以及效果register.jsp:注册&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt..
超好看的3D烟花代码(html+css+js)带背景音乐
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注