先说明下，这是在谷歌浏览器下字体显示等问题做个研究，火狐下有点差异，不过火狐占有率低，而且显示的没有谷歌那么合理，不管它先。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. 【朝花夕拾】四大组件之（一）Broadcast篇

    前言 笔者最近在探究ANR及源码的过程中,发现对Broadcast的一些应用层面上的知识有的感觉比较生疏,有的记忆不准确,有的认识不完整.所谓“基础不牢,地动山摇”,于是就梳理了一下Broadcast ...

  2. 【Python3爬虫】为什么你的博客没人看呢？

    我相信对于很多爱好和习惯写博客的人来说,如果自己的博客有很多人阅读和评论的话,自己会非常开心,但是你发现自己用心写的博客却没什么人看,多多少少会觉得有些伤心吧?我们今天就来看一下为什么你的博客没人看呢 ...

  3. mysql索引规范

    索引并不是越多越好!索引可以提高查询效率,但会降低增删改效率.但多了甚至会降低查询效率. Innodb是按照主键索引的顺序来组织表,如没有建立主键,mysql会选择第一个非空唯一索引做为主键,或生成一 ...

  4. 【JVM系列】一步步解析java执行内幕

    对于任何一门语言,要想达到精通的水平,研究它的执行原理(或者叫底层机制)不失为一种良好的方式.在本篇文章中,将重点研究java源代码的执行原理,即从程 序员编写JAVA源代码,到最终形成产品,在整个过 ...

  5. Docker在Linux上运行NetCore系列（三）在Linux上使用Docker运行Asp.NetCore

    转发请注明此文章作者与路径,请尊重原著,违者必究. 系列文章:https://www.cnblogs.com/alunchen/p/10121379.html 开始说明 上几篇文章都是通过Linux运 ...

  6. DSAPI.网络.网卡信息属性表

    DSAPI.网络.网卡信息属性表 其中,带有ReadOnly的属性只可读不可改,不带ReadOnly的属性即可读也可直接修改,如IP地址,Mac地址等 丢弃接收数据包数: 0 丢弃发送数据包数: 0 ...

  7. C#工具:Ado.Net SqlServer数据库 MySql数据库

    数据库连接字符串(web.config来配置),可以动态更改connectionString支持多数据库. SqlServer调用数据库 using System; using System.Coll ...

  8. weUI之分页查询实现

    本文旨在介绍移动端h5分页查询实现 1.前端html 前端基于weui 样式库实现   参考http://jqweui.com/ <div class="weui-search-bar ...

  9. Web后端 JAVA学习之路

    1.Java分类 Java按应用来分,可以分为J2ME(手机版),J2SE(标准版),J2EE(企业版)三部分. ・J2ME:已经被安卓开发取代. ・J2SE:Java的核心类,其中包括桌面应用,但一 ...

  10. Jetty 开发指南： 嵌入式开发之HelloWorld

    Jetty 嵌入式之 HelloWorld 本节提供一个教程,演示如何快速开发针对Jetty API的嵌入式代码. 1. 下载 Jar 包 Jetty被分解为许多jar和依赖项,通过选择最小的jar集 ...