壹周立波秀2011全集,济公传郭德纲,琦貂
属性名 | 单位 | 描述 |
---|---|---|
letter-spacing | px | 设置字符间距 |
word-spacing | px | 设置单词间距 |
letter-spacing
属性原理是:根据要设置的文本每一个字符之间的间距。letter-spacing
属性的实践,实践内容如:将html
页面中的p
标签中的文本每一个字符间距设置为50px
。代码块
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>设置字符和单词距离</title> <style> p{ letter-spacing: 50px; } </style> </head> <body> <p>成功不是打败别人,而是改变自己。</p> </body> </html>
结果图
word-spacing
属性原理是:根据要设置的文本,以空格为核心设置间距,主要用于在英文的网站中,笔者使用中文是为了让读者更好的理解word-spacing
属性的原理。让我们进入letter-spacing
属性的实践,实践内容如:将html页面中的p
标签中的每一个以空格之间的间距设置为30px
。
代码块
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>设置字符和单词距离</title> <style> p{ word-spacing: 30px; } </style> </head> <body> <p>成功 不是 打败 别人,而是改变自己。</p> </body> </html>
结果图
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
网友评论