p字间距 html段落内文字设置字间距间隔

只对段落p内文字设置字间距,段落<p>是html段落标签,以<p>开始,以</p>结束,通常文章分段使用p标签,而有时小局部布局也可以使用p来布局。通过css设置其样式实现排版目的。

这里针对p设置字间距,使用letter-spacing《css 字间距》属性实现,其属性单词值为具体数字+单位(整数)。

一、网页全局定义设置p的字间距

p{letter-spacing:2px}

设置p段落内文字间隔间距为2px。

p{letter-spacing:5px}

设置p段落内文字间隔间距为5px。

两者选其一。

以上两种值对p内文本(无论中文汉字、英文单词字母、数字、符号都适用生效)设置字与字之间间距。

根据布局切图重构经验很少遇到对整个网页p初始化全局设置字间距样式,一般小局部小布局,或需要地方才设置文字之间需要间隔距离。

二、给指定p段落标签布局内文字设置字间距

方法一:
CSS代码:

.abc{letter-spacing:5px}

大家都可以使用class=abc均生效,如div、span、li、h1、h2、h3都能生效。

任何标签均可以调用需要间距

p.abc{letter-spacing:5px}

指定p标签使用class=abc此生效

关键html示例代码:

<p class=”abc”>指定给p使用class=abc生效的</p>

指定专给p设置字间距css

解释:
.abc{... ...}和p.abc{... ...}
都是定义选择器,但p.abc代表只有p标签才能使用,其它标签使用不能生效。而只有.abc{}的定义后任何标签都可以使用,也包括p标签。

方法二:
给p父级设置字间距,p会继承父级字间距。
css代码:

.bbb{ letter-spacing:5px}
 

关键的html代码:

<div class="bbb">
<p>我们之间距离为5px</p>
</div>

效果:

p继承父级字间距样式

解释:这里虽然p没有被直接设置字间距letter-spacing css,但对其父级设置,而p继承了父级设置字体内容排版样式,依然是成功的。

以上两种方法,均能对p段落设置文字之间间距,都看div css布局时候选择适合的,平时也都使用使用,熟能生巧自然会快速选择适合项目的css布局方式。

 

三、行间距则使用line-height进行设置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247465.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基本数据类型

上节回顾 1.循环打印数列1&#xff0c;3&#xff0c;5&#xff0c;.........&#xff0c;99 for i in range(100):if i%21:print (i) 2.turtle 库 # penup 抬笔 # pendown 落笔 # pensize 画笔大小 # pencolor 画笔颜色## 画笔运动函数 # fd 前进 # bk 后退 # goto 到达指定的坐…

修改系统默认 alert 弹框样式

修改默认 alert 弹框&#xff0c;思路很简单&#xff0c;定义一个 alert(e) 函数&#xff0c;加载最开头即可。 css部分&#xff1a; <style>#msg{width:266px;position: fixed;z-index:999;top: 49%;margin-top:-80px;left:50%;margin-left:-133px;background:#fff;bo…

Code Review的重要性

这几天一直在搞一家客户的产品升级动作&#xff0c;数据的转移已经完成大部分&#xff0c;因为升级主要的目标是处理性能问题&#xff0c;所以我针对性的对将要升级的版本进行了一些操作性能检查&#xff0c;真是不做不知道&#xff0c;一做吓一跳&#xff0c;有一个查询选择人…

Myeclipse快捷键总结大全

Myeclipse快捷键 Ctrl1 快速修复 CtrlD: 删除当前行 CtrlQ 定位到最后编辑的地方 CtrlL 定位在某行 CtrlO 快速显示 OutLine CtrlT 快速显示当前类的继承结构 CtrlW 关闭当前Editer CtrlK 快速定位到下一个 CtrlE 快速显示当前Editer的下拉列表 CtrlJ 正向增量查找(按…

秋蝉鸣泣之时

奇怪的题目背景 所误入的 是回忆的教室 所响起的 是通向绝望的计时器 所到达的 是开始的结束 你 能相信吗? 题目背景 最近礼奈酱学会了线段树和树状数组两种数据结构 由于礼奈酱上课听的很认真&#xff0c;所以她知道 树状数组常见的操作是 单点加区间求和 线段树常见的操作是…

对浅拷贝与深拷贝的研究

浅拷贝只复制指向某个对象的指针&#xff0c;而不复制对象本身&#xff0c;新旧对象还是共享同一块内存。 浅拷贝的实现方式 Object.assign()&#xff1a;需注意的是目标对象只有一层的时候&#xff0c;是深拷贝Array.prototype.concat()Array.prototype.slice()深拷贝就是在拷…

:nth-child(n)与:nth-of-type(n)为啥显示不对呢

首先是二者的区别 :nth-child(n) 是选择父元素的第n个子元素。 :nth-of-type(n) 是选择父元素的第n个同类型的子元素 举个例子&#xff1a; <div class"read"><h1>title</h1><p>paragraph1</p><p>paragraph2</p> <!…

css3 box-shadow阴影(内外阴影与发光)讲解

基础说明&#xff1a; 外阴影&#xff1a;box-shadow: X轴 Y轴 Rpx color; 属性说明&#xff08;顺序依次对应&#xff09;&#xff1a; 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值&#xff08;大小&#xff09; 阴影的颜色 内阴影&#xff1a;b…

Apress Pro Android 2

Apress Pro Android 2转载于:https://www.cnblogs.com/gavinhughhu/archive/2010/03/21/1690792.html

Query意图分析:记一次完整的机器学习过程(scikit learn library学习笔记)

所谓学习问题&#xff0c;是指观察由n个样本组成的集合&#xff0c;并根据这些数据来预测未知数据的性质。 学习任务&#xff08;一个二分类问题&#xff09;&#xff1a; 区分一个普通的互联网检索Query是否具有某个垂直领域的意图。假设现在有一个O2O领域的垂直搜索引擎&…

使用 vue-cli 开发多页应用

修改的webpack配置文件 全局配置 修改 webpack.base.conf.js 打开 ~\build\webpack.base.conf.js &#xff0c;找到entry&#xff0c;添加多入口 entry: {app: ./src/main.js,app2: ./src/main2.js,app3: ./src/main3.js, }, 运行、编译的时候每一个入口都会对应一个Chunk …

深度学习系统相比较传统的机器学习系统,针对常见的分类问题,精度究竟能有多大提升?...

来源&#xff1a;知乎原文链接&#xff1a;深度学习系统相比较传统的机器学习系统&#xff0c;针对常见的分类问题&#xff0c;精度究竟能有多大提升&#xff1f; 问题&#xff1a; 我现在手头有一个binary classification的问题。数据量在一百万左右。每个sample都是一个14个f…

远程链接错误:这可能是由于credssp加密oracle修正

此错误解决办法 1.WinR 输入regedit打开注册表 找到对应的以下目录HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System 此时如果System下没有CredSSP时创建CredSSP没有Parameters时,创建Parameters 创建方法:右建>>新建>>项 2.在Para…

SpringBoot入门最详细教程

https://www.jianshu.com/p/af3d5800f763 网上有很多springboot的入门教程&#xff0c;自己也因为项目要使用springboot&#xff0c;所以利用业余时间自学了下springboot和springcloud&#xff0c;使用下来发现springboot还是挺简单的&#xff0c;体现了极简的编程风格&#xf…

通过Vue CLI3 快速创建Vue项目并部署到tomcat

1、前提 首先你要安装好nodejs和yarn,直接在官网下载安装包&#xff0c;一键安装即可&#xff0c;不需要什么环境配置&#xff0c;我安装的是最新版本&#xff08;node-v10.13.0、yarn-1.12.3&#xff09; 2、安装 同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3&#x…

简述区块链(1)- 也许只有这一篇

一、唠叨两句 最近一直在考虑一个事情&#xff0c;就是怎么给不太了解技术的人讲清楚区块链。我先试着写下来&#xff0c;然后在逐步打磨吧&#xff0c;目标就是让哪些说看区块链看的云里雾里的同学能对区块链有一些认知。 二、定义 简单的给区块链下个定义&#xff1a;基于加密…

Vue CLI 3.0脚手架如何在本地配置mock数据json

前后端分离的开发模式已经是目前前端的主流模式&#xff0c;至于为什么会前后端分离的开发我们就不做过多的阐述&#xff0c;既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。 我们在开发的过程中&#xff0c;由于后台接口的没有完成或者没有稳定之前我们都是采用…

python 通过下载包setup.py安装模块

下载安装包&#xff0c;并解压到相应的位置 1、打开cmd 2、到达安装目录 3、python setup.py build 4、python setup.py install 转载于:https://www.cnblogs.com/liuchunxiao83/p/11207340.html

webpack之externals操作三部曲--正确的姿势

1.作用 首先webpack提供这个externals选项作用是从打包的bundle文件中排除依赖。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去&#xff0c;而是通过script的方式去访问这些依赖。 2.怎么用&#xff1f; 以jquery为例子&#xff0c;目的是在…

Anaconda3自带jupyter

1、cmd命令行中输入 JupyterNotebook 2、系统自动调起下面页面&#xff08;注册端口冲突是打不开的&#xff09; 转载于:https://www.cnblogs.com/liuchunxiao83/p/11207385.html