css 元素换行产生空白间隙问题

html-css023

css 元素换行产生空白间隙问题,第1张

inline-block本身会自带空隙或者block块级元素和其他元素之间因为空白而产生间隔。

容器设置font-size:0子容器再设置font-size即可

如:

html结构举例:

<div id="box">

    <div>后面的span换行有空隙可根据下面的css设置修正</div>

    <span>测试</span>

</div>

css举例:

#box{font-size:0}

#box div{font-size:14px}

#box span{font-size:12px}

这个超链接都是系统默认的,它是有一定空隙和间距的,你说的问题我也碰到过,是中间有地方代码错了,少代码或者代码不规范,再认真检查一下,问题也就出来了。

还有一种解决方法也很快

a:link,a:visited{color#000font-size:12pxtext-decoration:none}

a:hover{border-bottom:1px solid #000color:#ff0000}

如果你感觉还是紧的话,就在a:hover加放padding-bottom:2px这个可以调大小。

用 line-height:1 就可以把行高设为标准高度(也就是说字符的高度就是行的高度),行间距为0,当然,还要把pading和margin都要设为0,比如:

li {line-height:1padding:0margin:0color:#333font-size:15pxfont-family:"Microsoft Yahei"}

如果你还是觉得行与行之间存在空隙(尤其是英文字母),你还可以把行高设为小于1的值,比如 line-height:0.95 ,这样行与行之间就会发生边缘重叠,把空隙完全覆盖。