CSS中字母的间距怎样调节,方法是什么
Admin 2022-11-11 群英技术资讯 631 次浏览
这篇文章将为大家详细讲解有关“CSS中字母的间距怎样调节,方法是什么”的知识,下文有详细的介绍,小编觉得挺实用的,对大家学习或工作或许有帮助,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。CSS设置单词内字母的间距的方法
新建一个html文件,命名为test.html,用于讲解css如何调整英文字母之间的距离。在test.html文件内,使用p标签创建一行文字,用于测试。给p标签添加“letter-spacing:间隔大小;”样式。
letter-spacing 属性增加或减少字符间的空白(字符间距)。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。
注释:允许使用负值,这会让字母之间挤得更紧。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
letter-spacing:15px;
}
</style>
<head>
<body>
<p>you are beautiful</p>
</body>
</html>
输出结果:
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了rem布局原理解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章主要介绍了CSS 如何影响首次加载时的白屏时间的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
在css中,可以利用“:nth-child(n)”选择器来选择div下的第几个p元素,该选择器的作用就是选择父元素下的第n个子元素,语法为“div p:nth-child(n){css样式代码;}”。
有时候我们需要在网站上的边栏上放一个客户帮助的表单,开始是放一个按钮在那里,点击之后滑出内容来,一般这种效果我们会用js来控制。现在CSS3也可以做到了哦。这个是怎么做到的呢?那就要用到CSS3里面的:target这个标签了。之前我也写过相类似用到:target的动画。比如:CSS3手风琴的两种制作方案超酷的CSS3幻灯片效果下面 ...
这篇文章主要介绍了CSS解决inline-block的错位问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008