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教程

解锁查看全部内容

付费后查看完整内容
限时 微信扫码支付 ¥9.9 19.9

总结

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

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

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

HTML相关文章

一、案例效果二、欢迎界面的设计与功能2.1 、案例效果设计一个倒计时自动跳转的页面2.2、 布局界面 activity_welcome.xml 参考代码:&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schem...
这里记录一下做网易云小程序的音乐播放详情页面的代码。音乐播放界面的主要的重点有几个: 1、磁盘和摇杆的旋转效果,这里运用了css的动画属性 2、音乐播放和暂停,下一首/上一首等播放效果的实现 3、进度条的样式和控制 4、和上一页音乐推荐列表页通信,利用订阅与发布PubsubHTML&lt;!--pages/songDetail/songDetail.wxml--&gt;&lt;view class="songDetailContainer"&gt; &lt...
Unity中的 浏览器插件:3D WebView,利用好该插件我们可以自己使用Unity打造出一个自定义的多样化浏览器。可以用于2D显示,也可以用于3D空间场景中使用,在PC端、手机端和VR设备等都可以有一个非常好的效果。一起来浏览器插件:3D WebView的专栏学习使用吧!
&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;style&gt; body { background-image: url("./1.png"); } &lt;/style&gt;&lt;/head&gt;&lt;body.
TBS天杀的集成大坑拯救之路
首先确定是在什么环境下不展示图片,确定你的标签是&lt;img&gt;还是&lt;image&gt;,确定你是网页不展示图片还是真机模拟不展示图片,请对应问题查找方法。一、引用本地文件中存储的图片(1)真机环境(2)网页环境二、引用localhost或者127的本地服务器图片(1)真机环境(2)网页环境三、引用本地服务器开启的端口的图片(1)真机环境(2)网页环境四、富文本...
效果鸿蒙2.0 android app内部效果方法内置组件&lt;web-view src="https://baidu.rudon.cn/"&gt;&lt;/web-view&gt;&lt;template&gt; &lt;view&gt; &lt;web-view src="https://baidu.rudon.cn/"&gt;&lt;/web-view&gt; &lt;/view&gt;&lt;/template&gt;详见web-view | u
eg:方法一:在XML中进行更改&lt;Button android:id="@+id/B" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="提交按钮2" android:textColor="@color/white" android:textSize="30dp" android:backgroundTin.
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注