如何用CSS设置字符间的间距?

生活小百事通 2023年04月15日 阅读 (94)

1、首先我们随便创建一个基础的简单网页,页面就只有一个div,然后里面是一大串文字。如下:

测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距

如何用CSS设置字符间的间距?

2、此时我们运行这个问题网页,查看他的默认效果,可以看到他的文本是紧挨着的,几乎没有距离。

如何用CSS设置字符间的间距?

3、对于这种情况,我们肯定要解决这个问题,不然太难看了,领导与客户那里都不好交差啊。那么如何解决呢?其实很简单,只需要设置一个letter-spacing的属性即可。如下letter-spacing:8px;代码如下:divletter-spacing:8px;

测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距

如何用CSS设置字符间的间距?

4、然后我们来看下运行效果,很明显,现在的字体间的距离已经大了不少,比那个密集的状态要好看好多。

如何用CSS设置字符间的间距?

5、关于间距单位,我上面设置的是px,实际上你还可以用em等来表示。而且更好点个人感觉px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位 ,不会因为其他元素的尺寸变化而变化。em表示相对于父元素的字体大小。em是相对单位 ,没有一个固定的度量值,而是由其他元素尺寸来决定的相对值。相对而言,em可以用于响应式字体大小的单位,感觉很不错,当然,具体的还是得看你的具体需求。然后下面是我用一个em作为单位设置字符间距的一个例子,divletter-spacing:1em;

测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距测试文本间的间距

如何用CSS设置字符间的间距?

6、效果如图所示,也不错,特别是我只设置了一个em就几乎赶得上上面的8px了:

如何用CSS设置字符间的间距?

7、然后letter-spacing属性是支持大部分主流浏览器的,如下:

如何用CSS设置字符间的间距?

精彩内容尽在问答鸭,如果您觉得这篇内容不错,别忘了分享给好友哦!

相关文章

  • WPS文字/WORD表格无法上下调整大小或间距怎么办.

    WPS文字/WORD表格无法上下调整大小或间距怎么办

    1、用wps文字/word打开需要调整的表格,如图所示。2、选中需要调整表格间距的行,如图所示。3.4、打开“段落”对话框,在“缩进和间距”栏目下找到“间距”一栏,我们可以看到“段前”和“段后”被填上了数字“1.5”,此时我们可以把数字“1.5”改为“0”,然后按“确定”,此时经过我们的修改,现在可以自由调整上下间距了。

    2023-02-22 阅读 (730)
  • word2019如何设置行间距.

    word2019如何设置行间距

    1、首先,我们打开我们电脑上面的word2019;2、然后我们在里面输入一些文字;3、之后我们选中这些文字;4、然后我们点击行距按钮边上的下拉箭头;5、弹出的界面,我们点击行距选项;6、然后我们在值中输入一个我们想要设置的行距值,此处我们输入14磅,然后我们点击确定,一般间距都是以磅为单位的;7、结果如图所示,此时我们就可以看到行间距被我们的设置好了。

    2022-08-17 阅读 (462)
  • Excel图表如何控制数值轴的起始刻度和刻度间距.

    Excel图表如何控制数值轴的起始刻度和刻度间距

    1、打开数据表。2、制作一张图表,由于数据间距不大所以图表上的数据看上去变化不大。3、我们可以在数值轴上右击,点击设置坐标轴格式。

    2022-08-24 阅读 (297)
  • word2016段落间距设置教程.

    word2016段落间距设置教程

    1、打开我们电脑上的word,这里随便摘抄一些句子来做例子。2、选中需要改变的文字段落间距,点击菜单开始下的段落。

    2022-06-27 阅读 (169)
  • 网易云音乐怎么设置外文歌词显示出中文翻译.

    网易云音乐怎么设置外文歌词显示出中文翻译

    1、首先在电脑上打开网易云音乐,然后点击右上角的“设置”图标。2、这时就会弹出网易云音乐的选项窗口,在窗口中点击左侧边栏的“歌词”菜单项。

    2022-06-27 阅读 (155)
  • VUE怎么去掉水印 VUE怎么设置水印.

    VUE怎么去掉水印 VUE怎么设置水印

    1、水印可以关掉,也可以设置自己的水印,点击打开安装好的vue软件。如图所示2、打开软件后,在打开的首页界面,点击屏幕下方红色按钮最右边的井字图标。

    2022-06-27 阅读 (151)
  • win10如何设置动态锁(人离开后自动锁定).

    win10如何设置动态锁(人离开后自动锁定)

    1、首先确保你的系统是windows10,而不是win7或win8.1,因为只有win10系统才有“动态所”功能。

    2022-06-27 阅读 (151)
  • 网易云如何设置手机桌面歌词?.

    网易云如何设置手机桌面歌词?

    1、首先在手机中打开网易云音乐。2、然后点击主页面左上角的选项图标,如下图所示。3、接着在弹出的界面中点击底部的设置,如下图所示。

    2022-06-27 阅读 (148)
  • 怎样做卫生间的防水验收.

    怎样做卫生间的防水验收

    卫生间的防水验收是非常重要的!!它直接关乎到我们日后居住环境的安全问题,所以为了避免卫生间出现漏水到楼下去和渗透到建筑物当中,同时也是为了邻居之间的关系和楼层的安全着想,卫生间的防水验收就要特别的小心了!那么卫生间防水验收有哪些规范呢?下面就由二十多年防水施工资历的青龙防水李工给大家讲解一下吧~~1、卫生间防水验收规范一2、虽然卫生间在装修的过程中,已经进行过一次闭水的试验,但是工程完工后的验收是绝对不能忽视的,必须要对每个卫生间进行逐个验收。

    2022-08-11 阅读 (116)
  • 怎样设置win10系统的默认浏览器?.

    怎样设置win10系统的默认浏览器?

    1、首先我们打开系统设置页面,在页面中找到应用,点击进入,如下图所示,2、在左侧的列表中找到默认应用,点击进入,如下图所示,3、把页面滑动到最下方,找到浏览器,点击打开,如下图所示,4、可以看到这列表中有很多浏览器可供我们进行选择,我们可以选择自己喜欢使用的浏览器,点击一下,如下图所示,5、最后就可以看到默认的浏览器就是我们所设置的浏览器了,如下图所示,

    2022-06-27 阅读 (96)