Rumah >hujung hadapan web >html tutorial >letter-spacing与word-spacing的区别_html/css_WEB-ITnose
letter-spacing与word-spacing的区别_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:41:091921semak imbas
letter-spacing与word-spacing的区别:
l标题中的两个属性的使用频率虽然算不上多，但是也不能说没有用武之地，它们两个由于在外观和作用上都有相似之处，但是也有很大的不同，下面就通过实例简单介绍一下。
实例一:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.first{ letter-spacing:40px;}.second{ word-spacing:40px;}</style></head><body> <div class="first">I am a good boy</div> <div class="second">I am a good boy</div></body></html> 由以上的代码表现可以看出，letter-spacing修改的是字母或者字符之间的间距，而word-spacing修改的是字（单词）之间的间距。以上代码中letter-spacing将字母之间的间距设置为40px，需要注意的是，空格也算是一个字符，例如"I"与"am"之间的空格与两边的字母的间距也会设置为40px，所以"I"和"a"之间的间距是80px。word-spacing会将单词之间的间距设置为40px。
特别说明:
letter-spacing与word-spacing准确的说不是设置字母和字之间的间距，而是在指定的字母和字之后添加指定的间距，最后一个字母和字除外。
实例二:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.first{ letter-spacing:40px;}.second { word-spacing:40px;}.third{ word-spacing:40px; }</style></head><body> <div class="first">蚂蚁部落</div> <div class="second">蚂蚁部落</div> <div class="third">蚂 蚁部落</div></body></html> 有以上代码的表现可以看出，对于汉字，如果连在一起则被视作一个“word”。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/517.html
最为原始地址是:http://www.softwhy.com/
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Easy way to use JText 2.1.7 and HTML-style template for generating report_html/css_WEB-ITnoseArtikel seterusnya：z-index属性值为负数的作用_html/css_WEB-ITnose