inline-block产生的缝隙问题

inline-block缝隙:左右会默认有缝隙

style样式设置为填充和边距均为0;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
border: 2px solid red;
}
.box>li{
display: inline-block;
background-color: #ccc;
border-radius: 6px;
height: 30px;
font-size: 18px;
line-height: 30px;
}
</style>

效果显示:
Paste_Image.png

1
2
3
4
5
6
7
<body>
<ul class="box">
<li>inline</li>
<li>inline</li>
<li>inline</li>
</ul>
</body>

去掉间隙的方法

  • 父容器font-size:设为零。

    .box{font-size:o;}

  • 修改格式:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <body>
    <ul class="box">
    <li>inline</li><li>inline</li><li>inline</li>
    </ul>
    /*<ul class="box">
    <li>inline</li
    ><li>inline</li
    ><li>inline</li>
    </ul>*/
    </body>
  • margin-left:-8px;(与字体大小有关)
    但是会影响第一个li的显示样式,left会冒出ul的边框

  • float:left;使用浮动,而不使用inline-block;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    	.box{
    border: 2px solid red;
    overflow:auto;/*hidden*/
    }
    .box>li{
    float:left;
    background-color: #ccc;
    border-radius: 6px;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    }
    </style>

父元素ul需要撑开里面的浮动元素,使用overflow:auto或hideen;

另,inline-block(具有块级元素特性,可以设置宽高,上下边距填充) 在IE8以下不支持,可使用:

display: inine-block;
*display: inline;// 在IE8以下可以识别

文章目录
  1. 1. 去掉间隙的方法
  2. 2. 另,inline-block(具有块级元素特性,可以设置宽高,上下边距填充) 在IE8以下不支持,可使用:
,