您的位置:CSS5 > CSS笔记 >

css设置空格宽度间距样式 达到多个html空格宽度大小

发布日期:2019-08-15 21:16:25 来源:WWW.CSS5.COM.CN

不用打多个空格或空格字符代码就能实现准确空格多少个字宽度效果

html网页里键盘打多个空格,所有浏览器中看到也只有1个空格的位置间距,除了使用空格字符外,是可以用css来设置控制打空格宽度间距的,通过css样式来设置空格想要的多个空格位置大小效果。

CSS空格间距代码:

word-spacing

后面可以设置px单位值,也可设置em单位值。

em可以准确设置多个字的宽度效果,比如1em代表空格宽度为1个字宽度;4em代表空格宽度大小为4个字宽度大小的间距。

用样式表准确设置空格长度宽度大小实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css设置空格宽度大小实例 css5</title>
<style>
.kg{word-spacing:1em}
.kg2{word-spacing:2em}
.kg3{word-spacing:10px}
</style>
</head>
<body>
<div>未使用css设置 空格间距</div>
<div class="kg">使用了css设置 空格的间距为1em</div>
<div class="kg2">使用了css设置 空格的间距为2em</div>
<div class="kg3">使用了css设置 空格的间距为10px</div>
</body>
</html>

浏览器效果截图:

css设置空格宽度间距样式 达到多个html空格宽度大小
html多个空格实现效果截图

结论效果:

1、观察em与px为单位设置空格长度单位效果
2、观察1em与2em的宽度长度大小效果

原始未设置css样式空格间距样式默认宽度,对比px与em为单位宽度,我们可以根据需求如果要准确设置空格宽度,就采用em为单位。

1em代表空格1个字宽度;
2em代表空格2个字宽度;
5em代表空格5个字宽度;
以此类推使用em准确精准设置空格长度间距布局。

标签(Tag): 宽度 间距 空格
本文分享URL地址:https://www.css5.com.cn/biji/1565.shtml

作者:CSS5原创

上一页:上一篇:html字体加粗用css设置文字粗体样式
下一页:下一篇:苹果Mac电脑键盘快捷键大全_苹果系统快捷键集合