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 ...
随机推荐
- Elasticsearch Index模块
1. Index Setting(索引设置) 每个索引都可以设置索引级别.可选值有: static :只能在索引创建的时候,或者在一个关闭的索引上设置 dynamic:可以动态设置 1.1. S ...
- NotificationSetUtilDemo【判断APP通知栏权限是否开启，以及如何跳转到应用程序设置界面】
前言 当APP有推送功能时,需要判断当前app在手机中是否开启了允许消息推送,否则即使添加了推送代码仍然收不到通知. 效果图 oppo上的效果: 使用步骤 一.项目组织结构图 注意事项: 1. 导入 ...
- [翻译] EF Core 概述
Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...
- Scrum Mastery：产品开发中如何优化产品价值？
您是否在开发对组织来说有价值的产品?如何判断产品是否有价值? 如果没有经常提出这两个问题,那么您可能忽略了产品价值方面的问题. 产品是目前工作所要达成的目的,是组建团队的原因.产品也是你选择Scrum ...
- org.springframework.beans.factory.BeanDefinitionStoreException: Failed to read candidate component
原因:jdk1.8和你所用框架(spring+springMVC+mybatis)中spring框架的版本有问题, 解决方法:更换jdk1.7或者1.6
- CODING 如何使用 CODING 研发管理系统来敏捷开发
之前我们分享过<CODING 如何使用 CODING 开发 CODING>的文章,时过境迁,现在 CODING 研发管理系统已经上线了如持续集成.缺陷管理.测试管理等 DevOps 中的重 ...
- 路由刷rom手册
最近对家里面那5,6个路由器下手了. 路由列表:小米mini 2台. 优酷路由宝l1,tp wdr3320,tp wr840n, 友华wr1200js,小米路由r1n 步骤: 1. 想办法开启ssh ...
- dede首页、列表页调用非缩略图
在include/extend.func.php末尾添加 function firstimg($str_pic) { $str_sub=substr($str_pic,0,-7).strrchr($s ...
- 一篇文章了解Github和Git教程-AndroidStudio上传Github教程
前言 为了方便保存自己的代码,下班后可以回家继续进行,自己的码农工作,介绍一下Github. 什么是Github呢? 作为一个编程人员,我觉得得了解一下Github吧! 当然,如果你放弃了码农或者技术 ...
- 获取DataTable前几条数据
#region 获取DataTable前几条数据 /// <summary> /// 获取DataTable前几条数据 /// </summary> /// <param ...