先说明下，这是在谷歌浏览器下字体显示等问题做个研究，火狐下有点差异，不过火狐占有率低，而且显示的没有谷歌那么合理，不管它先。IE卡的要死，半死不活，也懒得深入研究这些细节，字体排版上不是强迫症，差别也不大。

            div{

                border: 1px solid black;

                color: red;

                font-size: 14px;

            }
<div>文字，咋,排-hello Spacing</div>

就是这么简单的页面。显示结果如下

汉字占的地方是绿色部分是宽14px，高14px

英文字符占的地方黄色部分是宽 7px，高14px

1.font-size:14px,默认行高会上下加1px,达到16px
2.汉字字高14px,字宽14px（宋体设计的是13+1模式）,字字紧相邻

3.英文字符（空格看成一个英文字符，hello后面那个）,宽7px

开始变动css，加字距

            div{

                border: 1px solid black;

                color: red;

                font-size: 14px;

                /* 添加字距 */

                letter-spacing: 10px;

            }

4.letter-spacing的意思是字与字之间的间距， 也就是出现在上图中的蓝色方块，这里设置宽10px

5.可以理解为默认letter-spacing:0px

6.应该把空格当成一个英文字符看，他也有自己的letter-spacing

7.中文标点符号等同于汉字，英文状态下标点符号等同于英文字符

再变动css，加词距

            div{

                border: 1px solid black;

                color: red;

                font-size: 14px;

                /* 添加字距 */

                letter-spacing: 10px;

                /* 添加词距 */

                word-spacing: 20px;

            }

8.word-spacing，单词间距，浏览器是根据空格判断的，有空格就认为有词。

9.hello后的空格，后加上字距letter-spacing(蓝色)，再加上 单词间距（粉红色块20） 才是真正的距离。

最后变一次CSS，加上首行缩进

            div{

                border: 1px solid black;

                color: red;

                font-size: 14px;

                /* 添加字距 */

                letter-spacing: 10px;

                /* 添加词距 */

                word-spacing: 20px;

                /* 添加首行缩进 */

                text-indent: 2em;

            }

10.这里1em为14px,2em为28px,text-indent首行缩进， 所以，文的前面为28px

11.这里可以看出，字距加在字后面，单词间的词距加在字距后， 字距词距默认皆为0！

最后附上html文件代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             div{

                 /*width: 100px;*/

                 border: 1px solid black;

                 color: red;

                 font-size: 14px;

                 text-decoration: none;

                 letter-spacing: 10px;

                 word-spacing:20px;

                 text-indent: 2em;

             }

         </style>

     </head>

     <body>

         <div>文字，咋,排-hello Spacing</div>

     </body>

 </html>

CSS中字距，词距，首行缩进，字体大小，排版相关问题的探讨的更多相关文章

  1. css中input框不可点击+首行缩进

    Css 1)text-indent::首行缩进 2)disabled="true"设置input框不可以点击 3)Css:xx!important:声明提前优先级最高..!impo ...

  2. css中的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  3. div+CSS实现段落首行缩进两个字符

    段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...

  4. 关于css的text-indent首行缩进两个字符和图片缩进的问题

    段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style typ ...

  5. css中字间距调整（转）

    css中字间距调整 (2014-01-02 13:51:07) 标签: 汉字 英文 间距 letter-spacing word-spacing 杂谈 分类: 网页制作 汉字间字间距设置:letter ...

  6. css —— 图片环绕+首行缩进

    1.利用css实现图片环绕文字的效果: 只需要给img标签设置float:left/right即可: 2.实现上段文字首行缩进两个字的效果: 使用 text-indent: 2em;即可(em为相对单 ...

  7. Div+Css实现段落首行缩进两个字符（text-indent标签）

    段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...

  8. 首行缩进css

    html首行缩进2字符,可以使用CSS属性中的[text-indent]进行设置. 设置代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. Unity中Text中首行缩进两个字符和换行的代码

    1.首行缩进两个字符 txt.text=“\u3000\u3000” + str: 2.首行缩进两个字符 将输入法换成全角的,在Text属性面板中添加空格即可. 3.换行    “\n” 补充 Uni ...

随机推荐

  1. 辅助模式最终考验的是想象力，先来看看怎么用！| Accessibility

    一.序 Hi,大家好,我是承香墨影! Android 的辅助模式(Accessibility)功能非常的强大.基本上被获取到授权之后,可以监听手机上的任何事件,例如:屏幕点击.窗口的变化.以及模拟点击 ...

  2. 《HelloGitHub》第 30 期

    公告 截止到第 30 期,贡献者 终于到达 3 位数-- 100 位.谢谢各位的支持和贡献,想要加入的小伙伴,快来推荐项目吧! <HelloGitHub>第 30 期 兴趣是最好的老师,H ...

  3. 【Java】几道让你拿offer的知识点

    前言 只有光头才能变强 之前在刷博客的时候,发现一些写得比较好的博客都会默默收藏起来.最近在查阅补漏,有的知识点比较重要的,但是在之前的博客中还没有写到,于是趁着闲整理一下. 文本的知识点: Inte ...

  4. 浅谈基于Intellij IDEA Maven的配置与使用

    在java开发中,引入jar包的方式从种类上划分,可分为自动导入和手动导入,然而,手动导入繁琐,不是很适合当前开发模式,手动导入也被自动导入所取代. 当前,Maven和Gradle是比较主流的自动导入 ...

  5. webpack-插件机制杂记

    系列文章 Webpack系列-第一篇基础杂记 webpack系列-插件机制杂记 前言 webpack本身并不难,他所完成的各种复杂炫酷的功能都依赖于他的插件机制.或许我们在日常的开发需求中并不需要自己 ...

  6. C#面试考点集锦

    C#面试考点集锦 ©智客坊      岁末年初往往是程序猿准备跳槽的高峰,当然互联网行业跳槽几乎是每个月都在发生,没有太过明显的淡季~那么,如何提高面试的通过率,最终顺利的拿到自己心仪的offer呢? ...

  7. 图片与Base64相互转换 jar包

    1.右键项目 -->Properties -->Java Bulid Path-> Libraries -->JRE System Library-->Access ru ...

  8. 设计模式 - 单例模式（Singleton Pattern）

    单例模式 介绍 模式:创建型 意图:保证一个类只有一个实例,并提供一个访问它的全局访问点 解决:一个全局使用的类频繁地创建与销毁 场景: 唯一序列号 web中的计数器 I/O与数据库的连接 …… 实现 ...

  9. Spinner之下拉多选，监听ID后显示不同Frgment页面

    本人安卓小白,公司最近项目需要用到不同的类型的用户注册,周末下午写完记录一下. 网上找了一堆没有适合自己的(或者说我没找到),写的比较基础,欢迎大家多多指导. 老规矩,先上效果图 网上在线合成的GIF ...

  10. 【English】十一、一般疑问句

    一.一般疑问句定义 参考:英语语法中的一般疑问句和特殊疑问句的区别   英语一般疑问句句型结构 能用yes / no(或相当于yes / no)回答的问句. 二.一般疑问句的句子结构,三种 be动词: ...