站内搜索:
首页 >> 前端 >> 内容
去除inline-block元素间间距的N种方法

时间:2017/3/28 9:11:00

inline-block元素主要包括:<input> 、<img> 、<button> 、<texterea> 、<label>拥有内在尺寸,可设置宽高和内外边距,但是不会自动换行;

一、情景描述


.space a { display: inline-block; padding: .5em 1em; background-color: red; } 
<p class="space"> <a href="#">苹果</a> <a href="#">橘子</a> <a href="#">甘蔗</a></p>


去除inline-block元素间间距的N种方法
.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: red;
    margin-left:-5px;
}

(2)使用font-size:0

.space { font-size:0; } .space a { display: inline-block; padding: .5em 1em; background-color: red; font-size:16px } 

(3)使用letter-spacing

.space { letter-spacing: -5px; } .space a { display: inline-block; padding: .5em 1em; background-color: red; letter-spacing: 0px; }

(4)使用word-spacing

.space { word-spacing: -5px; } .space a { display: inline-block; padding: .5em 1em; background-color: red; word-spacing:0px; }

三、结果样式

去除inline-block元素间间距的N种方法

  • 上一篇:[NODE之9]assert模块
  • 下一篇:daterangepicker基础的配置
  • 返回顶部