css设置字体间距

html-css017

css设置字体间距,第1张

01

先看下我们的html代码，很简单，就是一个div里有一段文字，我们为这个div添加了一个样式 zn

02

默认情况下，不加任何样式时，这段文字的间距是很小的，如图

03

为了添加文字的间距，我们可以添加letter-spacing的样式，添加一个zn的样式名，样式代码为 letter-spacing: 12px就是每个文字间会有12像素的间距。

04

再运行页面，就可以看到效果了。文字间的间距明显加大了。

一看你就是初学者，一定要记得css初始化，因为各个浏览器自带的有默认的样式。

那么什么是css初始化？

其实就是将默认的样式清除掉，例如div之间有间隙等，下面给你一些css初始化的样式。你可以直接放到css里最前面直接用。

// 腾讯：

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0padding:0} 

 

body{font:12px"宋体","Arial Narrow",HELVETICAbackground:#fff-webkit-text-size-adjust:100%} 

 

a{color:#2d374btext-decoration:none} 

 

a:hover{color:#cd0200text-decoration:underline} 

 

em{font-style:normal} 

 

li{list-style:none} 

 

img{border:0vertical-align:middle} 

 

table{border-collapse:collapseborder-spacing:0} 

 

p{word-wrap:break-word} 

 

 

// 新浪：

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0padding:0border:0} 

 

body{background:#fffcolor:#333font-size:12px margin-top:5pxfont-family:"SimSun","宋体","Arial Narrow"} 

 

ul,ol{list-style-type:none} 

 

select,input,img,select{vertical-align:middle} 

 

a{text-decoration:none} 

 

a:link{color:#009} 

 

a:visited{color:#800080} 

 

a:hover,a:active,a:focus{color:#c00text-decoration:underline} 

 

 

// 淘宝：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0 padding:0 } 

 

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53 } 

 

h1, h2, h3, h4, h5, h6{ font-size:100% } 

 

address, cite, dfn, em, var { font-style:normal } 

 

code, kbd, pre, samp { font-family:couriernew, courier, monospace } 

 

small{ font-size:12px } 

 

ul, ol { list-style:none } 

 

a { text-decoration:none } 

 

a:hover { text-decoration:underline } 

 

sup { vertical-align:text-top } 

 

sub{ vertical-align:text-bottom } 

 

legend { color:#000 } 

 

fieldset, img { border:0 } 

 

button, input, select, textarea { font-size:100% } 

 

table { border-collapse:collapse border-spacing:0 }