关闭

深入理解letter-spacing,word-spacing的对比区别

时间: 2017-11-06阅读: 2014标签: css

letter-spacing  

lletter-spacing 属性增加或减少字符间的空白(字符间距)。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。

<p style="letter-spacing:10px;"> thisisatest </p>
//显示: t  h  i  s  a  t  e s t
<p style="letter-spacing:10px;"> 这是一个测试</p>
//显示:这   是   一   个   测   试


word-spacing  

word-spacing 属性增加或减少单词间的空白(即字间隔)。

该属性定义元素中字之间插入多少空白符。针对这个属性,“字” 定义为由空白符包围的一个字符串。如果指定为长度值,会调整字之间的通常间隔;所以,normal 就等同于设置为 0。允许指定负长度值,这会让字之间挤得更紧。

<p style="word-spacing:10px;"> this is a  test</p>
//显示: this   is    a     test*/
<p style="word-spacing:10px;">这  是   一   个  测  试 </p>
//显示: 这     是      一      个     测    试

letter-spacing,word-spacing的区别

word-spacing 属性增加或减少单词间的空白(即字间隔)。 letter-spacing 属性增加或减少字符间的空白(字符间距)。word-spacing意思是设置单词间的间距,如何区别是不是为一个单词呢,这里我们可以看出 用空格隔开的为一个单词,所以在执行word-spacing:10px;执行的前后可以发现,执行后空格变得更大了!!



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/51

CSS 解析原理_你知道浏览器CSS是如何解析吗?

作为前端,我们每天都在与CSS打交道,那么CSS的原理是什么呢? 浏览器渲染过程分为了两条主线:其一,HTML Parser 生成的 DOM 树;其二,CSS Parser 生成的 Style Rules ;

CSS中的一些细节

当position设置为:absolute或者fixed时,元素的display会转换为block。(设置float也会产生这样的效应)正常情况下,div会被内容撑开,但是如果设置了1.的情况下,父元素就会产生塌陷,失去高度。

精简CSS代码,提高代码的可读性和加载速度

定义简洁的CSS规则:CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。

Javascript可以控制css吗?

JavaScript可以直接控制css。JavaScript中可以直接设置style的属性、改变class、设置cssText、创建引入新的css样式文件等方法来控制css样式。

CSS中可以和不可以继承的属性

这篇文章整理css中无继承性的属性、继承性的属性、所有元素可以继承的属性、内联元素可以继承的属性、块级元素可以继承的属性

CSS基础一定要看的包含块(containing block)

一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下,包含块就是这个元素最近的祖先块元素的内容区,但也不是总是这样。在本文中,我们来过一遍确定包含块的所有因素。

Js如何动态修改css样式

使用obj.className来修改样式表的类名,使用obj.style.cssTest来修改嵌入式的css,使用obj.className来修改样式表的类名,使用更改外联的css文件,从而改变元素的css

Web前端-CSS必备知识点

css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位。

网页打印css print

说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数问题

CSS3 2D转换

转换是使元素改变形状、尺寸和位置的一种效果。通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,可以大致分为2D转换和3D转换。下面介绍的是2D转换的相关知识点。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!