css 字体改小成10px时，span元素和div之间会有一个间隙，该如何解决？

html-css036

css 字体改小成10px时，span元素和div之间会有一个间隙，该如何解决？,第1张

一看你就是初学者，一定要记得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 }

有两种方法：a 是行内标签，不能设置高宽和外边距margin，但能使用内边距padding

如果你不固定大小 ，应用padding

需要用固定大小，把它变成行内块标签display: inline-block,这样后就可以设置高宽了，

移动10px也有两种：

这10px算a标签内，就用padding-left:10px

这10px不算在a标签内，就用margin-left: 10px注意：需设置成行内块元素才可以设置外边距，否则无效；

自己试试吧！！！

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<body>标签中，输入html代码：<span style="font-size: 8px">hello world!</span>。

3、浏览器运行index.html页面，此时设置了8px字体大小的文字。