处理inline-block与img元素造成的间隙

inline-block的间距处理

在写代码时，你是否也遇到过这种情况，明明没有给元素设置边距，它们之间却有了间隙，就很烦。这是什么原因造成的呢？经过我的调查与学习终于知道了！原来，设置为inline-block的元素的后面会由于换行产生了一个空格字符(inline元素也会有)，大小为4px，这也就是造成间隙的主要原因，对于这些间隙，有以下的解决方案。

1.设置字体大小为0

对于有文字的内容，拿ul与li来举例，为保证文字正常显示，设置方式如下：

1
2
3
4
5
6
7
8

ul{
    font-size:0px;
}
ul>li{
    display: inline-block;
    background-color: red;
    font-size: 16px;
}

2.标签写在同一行（不靠谱，会扰乱结构）

3.标签不闭合（会被浏览器解析成正确的形式）（不靠谱，不规范）

4.设置字体间距为负间距（letter-spacing: -5px）

1
2
3
4
5
6
7
8
9

ul{
   letter-spacing: -5px;
}
ul>li{
    display: inline-block;
    background-color: red;
    letter-spacing: normal;
    
}

5.用浮动代替inline-block

img下方的间距处理

img元素是行块元素，水平方向也会出现间隙，按照上面的方式处理就ok了，然而，img元素下方会出现多余的空白，因为img默认是根据基线对齐的，由于我对基线啥的不太了解，直接提供解决方案。

1.将图片设置为块级对象

1

display : block ;

2.将图片的垂直对齐方式改为top

1

vertical-align : top ;

3.将字体大小改为0

1

font-size : 0px ;

4.将图片设置为浮动

1

float : left ;

=============================结束================================

• ← Previous Post
• Next Post →