letter-spacing與word-spacing的區別

admin發表於2017-02-10

標題中的兩個屬性的使用頻率雖然算不上多，但是也不能說沒有用武之地，它們兩個由於在外觀和作用上都有相似之處，但是也有很大的不同，下面就通過例項簡單介紹一下。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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準確的說不是設定字母和字之間的間距，而是在指定的字母和字之後新增指定的間距，最後一個字母和字除外。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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”。

相關文章