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…

: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…

远程链接错误:这可能是由于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

Anaconda3自带jupyter

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

理解Shadow DOM

1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢&#xff1f;可以理解为一般情况下使用肉眼看不到的DOM结构&#xff0c;那如果一般情况下看不到的话&#xff0c;那也就是说我们无法直接控制操纵的DOM结构。 Shadow DOM 它是HTML的一…

046 实例11-自动轨迹绘制

目录 一、"自动轨迹绘制"问题分析1.1 问题分析1.2 自动轨迹绘制二、"自动轨迹绘制"实例讲解2.1 自动轨迹绘制2.2 数据接口定义2.3 数据文件三、"自动轨迹绘制"举一反三3.1 理解方法思维3.2 应用问题的扩展一、"自动轨迹绘制"问题分析 …

python 操作 elasticsearch-7.0.2 遇到的问题

错误一&#xff1a;TypeError: search() got an unexpected keyword argument doc_type&#xff0c;得到不预期外的参数 解决方法&#xff1a;elasticsearch7里不用文档类型&#xff0c;所以去掉 doc_typecredit_data 错误二&#xff1a;RequestError(400, illegal_argument_ex…

Java生鲜电商平台-订单中心服务架构与异常订单逻辑

Java生鲜电商平台-订单中心服务架构与异常订单逻辑 订单架构实战中阐述了订单系统的重要性&#xff0c;并从订单系统的信息架构和流程上对订单系统有了总体认知&#xff0c;同时还穿插着一些常见的订单业务规则和逻辑。上文写到订单的拆单部分时搁置了&#xff0c;现在接上文继…

Vuex的全面用法总结

1. vuex简介 vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起&#xff0c;集中式来管理。需要声明的是&#xff0c;这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧&#xff0c;如果不懂…

vue中通过第三方代理解决跨域问题

最近在学node&#xff0c;遇到了跨域的问题&#xff0c;来记录下方法 首页服务端的框架是通过express-generator 搭建起来的 npm install -g express-generator 具体接下来的细节不多说&#xff0c;今天主要说跨域 的问题 左侧为服务端项目结构&#xff0c;www为可执行文件&am…

Java生鲜电商平台-生鲜供应链(采购管理)

Java生鲜电商平台-生鲜供应链(采购管理) 在生鲜供应链系统中采购中心这一模块&#xff0c;它是电商公司管理采购的模块&#xff0c;包含供应商管理&#xff0c;采购订单管理&#xff0c;采购商品管理&#xff0c;在该模块中采购订单是采购中心的核心模块。在其他的比如供应商的…

链式调用setTimeout()与setInterval()的区别

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的&#xff0c;因为在页面的生命周期中&#xff0c;不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行、事件处理程序、Ajax 回调函数都必须使用同样的…

如何让Element UI的Message消息提示每次只弹出一个

Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示&#xff0c;但是公司的测试人员在进行测试时会一直点&#xff0c;然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况&#xff08;毕竟客户不会闲着没事一直点点点&…