首页 >

CSS 怎么清除多个a标签之间的默认空白空隙/间距? – CSS – 前端,css3高度

css 格式,css hover动画,css 蓝色的渐变,css搜索栏代码html,width取屏幕宽度css,css3表格的合并,css3高度CSS 怎么清除多个a标签之间的默认空白空隙/间距? - CSS - 前端,css3高度

1、《两个input input与button之间有空隙清除》

2、《《:last-child》清除列表中最后的空隙》

关于a标签的空隙,在今天实际使用中发现之前竟然从未想过,也基本不会用到,各种a标签肯定要使用margin进行间距设置而不是默认的堆放再一起。

但刚才在写一个页码的时候,要使多个a链接页码保持紧贴,竟然发现有很大的空隙!

先看要实现的效果:

css 格式,css hover动画,css 蓝色的渐变,css搜索栏代码html,width取屏幕宽度css,css3表格的合并,css3高度a标签空隙间隙1.png

而实际使用a进行默认的效果:

css 格式,css hover动画,css 蓝色的渐变,css搜索栏代码html,width取屏幕宽度css,css3表格的合并,css3高度a标签空隙间隙.png

可以很明显的看出a标签默认状态下存在一定的间隙,即使大家使用了类似*{margin: 0;padding: 0;} 这样的代码重置了浏览器默认样式,也会发现类似<a>标签这种inline-block元素,它们之间也还存在着间距。

那么如何解决a标签的空白间隙呢?

看案例:

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=0">
<title>怎么去除a标签的默认间距</title>
<styletype="text/css">
*{margin:0;padding:0;}
.demo{padding:14px;text-align:center;}
.demop{margin-bottom:6px;}
.demoa{padding:3px5px;text-decoration:none;color:#ffffff;}
.demoa:first-child{background-color:#2eacff;}
.demoa:last-child{background-color:orange;}
</style>
</head>
<body>
<p>默认情况</p>
<div>
<ahref="#">底部链接1</a>
<ahref="#">底部链接2</a>
</div>
</body>
</html>

运行效果:

css 格式,css hover动画,css 蓝色的渐变,css搜索栏代码html,width取屏幕宽度css,css3表格的合并,css3高度a空隙.png

大家会发现默认间距的存在,这种间距也被成为元素间留白间距。

之前也曾遇到过,但是没太注意,最近因为和同事整理公司的UI框架,遇到类似的情况比较多,所以,查找了相关资料以及实践验证之后,发现了如下四种清除这种间距的方法:

方法一:font-size:0 清除多a标签之间空隙

<divclass="demodemo1">
<ahref="#">底部链接1</a>
<ahref="#">底部链接2</a>
</div>
.demo1{
font-size:0;
}
.demo1a{
font-size:14px;/*这里一定要设置,不然文本内容将不显示*/
}

css 格式,css hover动画,css 蓝色的渐变,css搜索栏代码html,width取屏幕宽度css,css3表格的合并,css3高度a标签空隙间隙方法1效果.png

这种方法,也是微信UI框架weui采用的方法,推荐使用。

css 格式,css hover动画,css 蓝色的渐变,css搜索栏代码html,width取屏幕宽度css,css3表格的合并,css3高度a标签空隙间隙方法1.png

方法二:a标签内容写在一行

因为这种间距是由于元素留白引起的,所以,当大家把代码写在同一行的时候,间距也可消除。

但是考虑到代码的可读性,这种方法建议谨慎使用!

<divclass="demo">
<ahref="#">底部链接1</a><ahref="#">底部链接2</a>
</div>

css 格式,css hover动画,css 蓝色的渐变,css搜索栏代码html,width取屏幕宽度css,css3表格的合并,css3高度a标签空隙间隙方法2效果.png

方法三:float浮动

<divclass="demodemo2">
<ahref="#">底部链接1</a>
<ahref="#">底部链接2</a>
</div>
/*float(浮动)*/
.demo2{
display:-webkit-box;
display:-webkit-flex;
display:flex;
justify-content:center;
}
.demo2a{
float:left;
}

*注: .demo2样式只是为了案例显示效果,非必需。 大家可以从多出来的代码就可以看到,这种方法会对原来的布局造成影响,所以,如果要采用这种方法,要考虑到对布局的影响。

css 格式,css hover动画,css 蓝色的渐变,css搜索栏代码html,width取屏幕宽度css,css3表格的合并,css3高度a标签空隙间隙方法3效果.png


方法四:letter-spacing

<divclass="demodemo3">
<ahref="#">底部链接1</a>
<ahref="#">底部链接2</a>
</div>
.demo3{
letter-spacing:-999px;
}
.demo3a{
letter-spacing:0;
}

注:该方法兼容性良好可以使用。

css 格式,css hover动画,css 蓝色的渐变,css搜索栏代码html,width取屏幕宽度css,css3表格的合并,css3高度a标签空隙间隙方法4效果.png

以上4种方法都可以去除多个a标签之间存在的默认间隙间距,兼容性最好按1234这样的顺序来。


CSS 怎么清除多个a标签之间的默认空白空隙/间距? - CSS - 前端,css3高度
  • 看三国演义能武装自己的头脑吗 - CSS - 前端,css 同类 选中多个
  • 看三国演义能武装自己的头脑吗 - CSS - 前端,css 同类 选中多个 | 看三国演义能武装自己的头脑吗 - CSS - 前端,css 同类 选中多个 ...

    CSS 怎么清除多个a标签之间的默认空白空隙/间距? - CSS - 前端,css3高度
  • 8at的变速箱型号 - CSS - 前端,csscell
  • 8at的变速箱型号 - CSS - 前端,csscell | 8at的变速箱型号 - CSS - 前端,csscell ...

    CSS 怎么清除多个a标签之间的默认空白空隙/间距? - CSS - 前端,css3高度
  • vertical - CSS - 前端,css如何使文字垂直对齐
  • vertical - CSS - 前端,css如何使文字垂直对齐 | vertical - CSS - 前端,css如何使文字垂直对齐 ...