11-4 男女授受不亲 - 使用letter/word-spacing增加或减少字符间的空白
本节编程练习不计算学习进度,请电脑登录imooc.com操作

男女授受不亲 - 使用letter/word-spacing增加或减少字符间的空白

中文字间隔、字母间隔设置:

如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 来实现,如下面代码:

h1{
    letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>

注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。

单词间距设置

如果我想设置英文单词之间的间距呢?可以使用 word-spacing 来实现。如下代码:

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>

 

任务

我来试一试:

为标题设置字母间距为20像素

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>字间距</title>
  7. <style type="text/css">
  8.  
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <h1>hello world!你好!</h1>
  14. </body>
  15.  
  16.  
  17. </html>
下一节