CSS中字距，词距，首行缩进，字体大小，排版相关问题的探讨
先说明下，这是在谷歌浏览器下字体显示等问题做个研究，火狐下有点差异，不过火狐占有率低，而且显示的没有谷歌那么合理，不管它先。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中字距，词距，首行缩进，字体大小，排版相关问题的探讨的更多相关文章
- css中input框不可点击+首行缩进
Css 1)text-indent::首行缩进 2)disabled="true"设置input框不可以点击 3)Css:xx!important:声明提前优先级最高..!impo ...
- css中的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- div+CSS实现段落首行缩进两个字符
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- 关于css的text-indent首行缩进两个字符和图片缩进的问题
段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style typ ...
- css中字间距调整（转）
css中字间距调整 (2014-01-02 13:51:07) 标签: 汉字 英文 间距 letter-spacing word-spacing 杂谈 分类: 网页制作 汉字间字间距设置:letter ...
- css —— 图片环绕+首行缩进
1.利用css实现图片环绕文字的效果: 只需要给img标签设置float:left/right即可: 2.实现上段文字首行缩进两个字的效果: 使用 text-indent: 2em;即可(em为相对单 ...
- Div+Css实现段落首行缩进两个字符（text-indent标签）
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- 首行缩进css
html首行缩进2字符,可以使用CSS属性中的[text-indent]进行设置. 设置代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- Unity中Text中首行缩进两个字符和换行的代码
1.首行缩进两个字符 txt.text=“\u3000\u3000” + str: 2.首行缩进两个字符 将输入法换成全角的,在Text属性面板中添加空格即可. 3.换行 “\n” 补充 Uni ...
随机推荐
- Ansible自动化运维工具安装与使用实例
1.准备两台服务器,要确定网络是通的.服务器当然越多越好啦....Ansible的简介和好处我就不多说了,自己看百科去(*╹▽╹*) IP:192.168.139.100 IP:192.168.139 ...
- 阿里云免费购买SSL证书，nginx无缝升级https
最近在升级交流学习社区,觉得有必要升级成https.以下是自己在升级中记录. 以下包括以下部分: 一.阿里云免费购买SSL证书 1.自己在阿里云申请了免费的,然后自己支付0元,购买了SSL证书 2.我 ...
- 【重学计算机】机组D6章：中央处理器
1. CPU的组成与功能 2. 数据通路 概念:执行部件间传送信息的路径,分共享通路(总线)和专用通路 抽象模型:时钟驱动下,A --> 组合逻辑 --> B D触发器定时模型: 时钟触发 ...
- 网络学习笔记（二）：TCP可靠传输原理
TCP数据段作为IP数据报的数据部分来传输的,IP层提供尽最大努力服务,却不保证数据可靠传输.TCP想要提供可靠传输,需要采取一定的措施来让不可靠的传输信道提供可靠传输服务.比如:出现差错时,让发 ...
- 移动APP及游戏推广，有预算为什么还起不了量
本文转自公众号:caoz的梦呓,作者是互联网行业内资深人士,这里分享一篇他本人写的经验干货,希望能给大家带来点帮助. 在广告分析师群,起量是他们讨论最多的话题之一. 我们刚做游戏出海业务的时候,第一款 ...
- SQL优化 MySQL版 - 多表优化及细节详讲
多表优化及细节详讲 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 注:本文章需要MySQL数据库优化基础或观看前几篇文章,传送门: B树索引详讲(初识SQL优化,认识索引):htt ...
- Tensorflow之基于LSTM神经网络写唐诗
最近看了不少关于写诗的博客,在前人的基础上做了一些小的改动,因比较喜欢一次输入很长的开头句,所以让机器人输出压缩为一个开头字生成两个诗句,写五言和七言诗,当然如果你想写更长的诗句是可以继续改动的. 在 ...
- Java基础系列-equals方法和hashCode方法
原创文章,转载请标注出处:<Java基础系列-equals方法和hashCode方法> 概述 equals方法和hashCode方法都是有Object类定义的. publi ...
- [翻译]在Windows版或MacOS版的Microsoft Edge上安装一个谷歌浏览器拓展
原文:Install a Chrome Web Store extension on Microsoft Edge for Windows and MacOS 拓展阅读:What to expect ...
- elementUi的时间选择器在IE浏览器的赋值问题--前端
项目技术:vue+elementUi,组件化 出现的问题:在IE浏览器(IE10+),唤醒组件加载赋值,表单中el-input等框赋值正确,el-date-picker选择器没有显示所附的值(或显示p ...