html p行间距离 p标签上下行间距CSS设置
在html网页中,我们看到文章段落使用p标签后上下段落之间会有行间隔距离,这里要介绍是p与p段落行间距离如何调整设置?
html p行间距 p上下段落间行间距截图
从上html <p>段落文章演示效果截图看出,p与p上下段落行间距是有一定距离的。这种段落p行间距是可以通过CSS调节调整的。常见方法有两种,一种line-height调整,另外一种使用margin调整行间距。
一、使用css line-height设置p行间距
使用CSS行高样式line-height可以设置调整p行间距,但是同时会影响每行文字间的上下间距,所以使用line-height虽然可以用来设置html p 行距离间隔,但是不是很实用,一般line-height只设置上下文字间间距。
一个未设置line-height和一个设置行间距对比效果截图
很显然是一css line-height固然能改变p行与P行间距间隔,但是也让每段自动换行的文字上下间距也变化了,所以line-height不实用。
二、使用margin实现p与p上下行间距改变
1、实现p与p上下行间距与br换行一样零距离
1)、关键html p行间距代码:
- p{margin:0 auto}
解释:对p设置上下间距为0,左右自动间距。
2)、p行间距离设置为0完整代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>html p段落行间距CSS设置 ThinkCSS</title>
- <style>
- p{ margin:0 auto}
- /* 设置p上下距离为0,左右自动 */
- </style>
- </head>
- <body>
- <p>第一段落P测试内容<br />第一段第二排内容</p>
- <p>第二段落P测试内容<br />第二段第二排内容</p>
- <p>第三段落P测试内容<br />第三段第二排内容</p>
- </body>
- </html>
3)、p行与行间距设置效果截图
margin设置p行间距为零的截图
4)、html p行距为零总结
这种设置margin:0 auto(相等于maring:0 auto 0 auto缩写,上为0,左为自适应,下为0,右为自适应),可以实现p行距离为零。
2、html p行间距调大调小
当然这里还是使用css margin实现p段落上下段落行距离调整。
1)、关键html p行距离调整CSS代码
依然是margin对象间间距属性。
- p{margin: 10px auto}
2)、p行距变小与变大代码说明
这里分别以不设置margin,默认原始的距离;设置margin:10px auto,设置行距上下距离为10px;设置margin:30px auto,设置行距上下距离为30px.
三种CSS代码分别为:
一种:不设置;
二种:p{margin: 10px auto}
三种:p{margin: 30px auto}
三种效果截图如下:
改变p段落上下段落行间距三种距离改变情况下截图
三、html <p>段落行间距总结
在设置P行间距距离时,需要考虑是否有必要,一般情况下,在HTML内放的一篇文章使用p标签来分段标记,是不需要调整p段落距离的。实在有必要调整时候一般通过padding或margin调整文章段落间行距离。
转载于:https://www.cnblogs.com/zhengyuan1314/p/7019817.html
html p行间距离 p标签上下行间距CSS设置相关推荐
- php 自定义行间距,CSS设置文字行间距的方法介绍(代码示例)
本篇文章的内容是关于CSS设置文字行间距的方法介绍,内容很详细,有需要的朋友可以参考一下. 对于行间距的设置肯定是需要行高属性line-height来设置间距.(相关推荐:CSS学习手册) 指定绝对值 ...
- li标签 常用的CSS设置
1. li的奇偶数: .item:nth-of-type(odd){奇数} .item:nth-of-type(even){偶数 } 2.选择前几个元素 :nth-child(-n+6){} /*[负 ...
- css行间距怎么设置(CSS设置行间距)
1. CSS设置行间距 CSS将文本设置双倍行距后方法: 打开一个html代码页面,创建一个含有一段文本的div标签. 使用css的line-height属性设置行的高为40px. 保存html代码后 ...
- html语言中行距如何设定,html怎么设置行间距离
html怎么设置行间距离 在html中很多人知道如何调解网站的行距,因为默认的行距给人的视觉是非常紧凑的',文章多了就造成不容易阅读.那么,html怎么设置行间距离?下面就由小编给大家介绍介绍吧,希望 ...
- android中段落距离,Android中TextView 行间距和段间距设置
这里有一篇文章关于设置段落间距(仅供参考):https://blog.csdn.net/yingpaixiaochuan/article/details/77996793 TextView行间距设置 ...
- before css 旋转_单标签!纯CSS实现动态晴阴雨雪
引言 本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <div c ...
- 标签打印软件如何设置打印区域
在平时使用的office软件中打印时,需要设置打印区域或者调整打印区域,那么在使用标签打印软件时,同样是需要设置打印区域的,尤其是对于那种有衬纸的标签纸,为了保证标签内容可以准确打印到标签纸上,需要根 ...
- html标签元素中定义样式表的属性名是,HTML标签属性与CSS样式
定义:超文本标记语言 Hypetext Markup Language 特点: 不需要编译,直接由浏览器执行 是一个文本文件 必须用htm或html作文件后缀 对大小写不敏感,HTML或html都可以 ...
- 计算机应用行距怎么弄,段间距和行间距的设置(2)(Word2013基础)——想象力电脑应用...
二.行间距的设置 行间距是指段落中各行文本之间的距离,改变行间距可以使用"开始"选项卡中"段落"工具组按钮或"段落"对话框来设置行间距. 1 ...
最新文章
- 机器学习数据不平衡不均衡处理之SMOTE算法实现
- html 跳转或打开新网页
- raid卡组不同raid_乐扩IO-PCE9230-4IR阵列卡组阵列教程
- Crypto++库在VS 2005中的使用——RSA加解密
- sqlalchemy 外键
- [Nginx]nginx 配置实例-动静分离
- 【DP】和谐的奶牛(jzoj 1750)
- ajax前台multipartfile,在SpringBoot中使用Ajax方式MultipartFile上传失败
- win10 免安装版本的MySQL的下载安装和配置
- 【图像处理】MATLAB:亮度变换
- Servlet编写登陆页面简单实践
- ThinkPHP5捕获致命错误流程
- 我们不知道我们不知道:用同化项目做网络安全
- 学生a3制图标题栏尺寸手绘_机械制图基础知识学习,如何画好一张零件图?
- VS2015安装教程及卸载教程
- 树莓派超声波 c语言,树莓派超声波测距+蜂鸣器(c语言)
- GO语言Comma-ok断言
- 关于UNI-APP微信小程序订阅信息订阅获取失败的问题处理
- 你知道什么是嵌入式技术吗?
- python从入门到人生巅峰
热门文章
- https://api.douban.com 不在以下 request 合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/net
- DRV835x电机驱动故障调试记录
- NVIC中断优先级管理
- 腾讯云服务器IP地址打不开网站注意80端口的问题
- java输出罗马数字,【Java】【刷穿 LeetCode】13. 罗马数字转整数(简单)
- HTML5简单个人主页设计
- 4864: [BeiJing 2017 Wc]神秘物质
- 如何高逼格的操作电脑打开软件(文件)Win+R高效启动软件
- 鸟哥私房菜学习(四)安装CentOS 7
- node.js v14.9.0以及v12.18.3两版本 百度网盘下载链接