您的位置:首页 > CSS技巧 > 【 返回上一页

css中文字间距_CSS汉字字之间间距设置

CSS中文字间距设置_CSS汉字间距

有时在DIV CSS布局时,局部对中文汉字字与字之间设置一定距离(中文字间距)如何设置?使用什么属性设置呢?

一、使用样式单词

字间距设置使用letter-spacing属性单词实现。

css letter-spacing是设置字与字间隔的样式。

  1. div{letter-spacing:2px} 

设置div内文字字间距为2px。同样字间隔自然也是2px宽度间隔间距。

二、字间距实例

css样式实现html中文中的中文汉字间距实例,这里设置两个div盒子,分别设置不同letter-spacing字紧贴距离,看看汉字之间字间距设置效果。

CSS实例代码如下:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>汉字间距实例 ThinkCSS</title> 
  6. <style> 
  7. .expa{ letter-spacing:4px;} 
  8. .expb{ letter-spacing:8px} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. 欢迎访问ThinkCSS网站<br /> 
  13. <span class="expa">中文字间距测试文字!</span><br> 
  14. <span class="expb">汉字字间隔距离测试内容!</span> 
  15. </body> 
  16. </html> 

以上文本字间距实例代码可直接复制后测试观察效果。

html中css设置不同字间距离实例效果截图


CSS中文字字间距设置实例效果截图

无论中文字还是英文字字母或字符间距都使用letter-spacing字间距样式实现。

下划线与间距扩展了解:
CSS下划线与字体距离

相关标签: 字间距 间隔
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/jiqiao/971.shtml

日期:2016-07-27 13:33:19 来源:www.thinkcss.com 作者:div css

热门点击