如何解决inline-block元素的空白间距 css 完美解决

html-css013

如何解决inline-block元素的空白间距 css 完美解决,第1张

inline-block元素之间之所以有空白间距是因为空格有字体大小原因，有两两种解决方法，如下。

第一种：

把代码之间的换行空白都去掉。

例如：

1

<div>第一个inline-block元素</div><div>第二个inline-block元素</div>

第二种：

把inline-block元素用一个大的div包起来，然后设置其字体大小为0即可，inline-block元素字体大小再单独设置。

例如：

<div style=”font-size:0">

<div>第一个inline-block元素</div>

<div>第二个inline-block元素</div>

</div>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

未使用font-size:0方法的

使用inline-block出现的间隙的解决方法：

父加上样式　font-size:0　是为的是去掉多余的空白

子元素加上应有的字体样式

<div style="width:120pxbackground:#ECEAEApadding:10pxtext-align:center">

<span style="display:inline-blockfont-size:12pxwidth:50pxheight:50pxline-height:50pxbackground:#F78789vertical-align:middletext-align:center">1</span>

<span style="display:inline-blockfont-size:12pxwidth:50pxheight:50pxline-height:50pxbackground:#35B86Dvertical-align:middletext-align:center">2</span>

</div>

使用font-size:0方法后的效果

<div style="font-size:0width:120pxbackground:#ECEAEApadding:10pxtext-align:center">

<span style="display:inline-blockfont-size:12pxwidth:50pxheight:50pxline-height:50pxbackground:#F78789vertical-align:middletext-align:center">1</span>

<span style="display:inline-blockfont-size:12pxwidth:50pxheight:50pxline-height:50pxbackground:#35B86Dvertical-align:middletext-align:center">2</span>

</div>

</body>

</html>