CMS源码库-专注织梦微擎模板插件源码整合分享!

全部

  • 全部
  • 织梦模版
  • 微擎源码
  • WP主题
  • 织梦插件
  • 建站教程

分享

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

发布于:2019-08-18 17:52    阅读次数:

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准确精准设置空格长度间距布局。

推荐模板
查看更多

相关教程

html不换行空格代码html不换

CSS强制换行解决完美支持

div边框原来有这么多种设

body里第一个div设置的高度

css字间距_P文本文字间距设

div不固定高宽垂直居中c