消除display: inline-block 元素间的换行符空格间隙的方法
想把一些元素在一行显示，最简单的方法是display:inline-block;变成行内块元素
但是同行显示的inline-block元素之间会有一个换行符，一般占据4px位置(例如Chrome浏览器 字体默认大小16px,行内块元素间隔4px,字体大小越大间隔越大)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrap{
width: 500px;
height: 500px;
border: 1px solid red;
font-size:16px;
}
.wrap div{
display: inline-block;
}
.div1{
width: 100px;
height: 100px;
background-color: #f00;
}
.div2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.div3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4"></div>
</div>
</body>
</html>
效果：
解决行内块间隔的方法：
1.直接去掉换行符或注释换行
<div class="wrap">
<div class="div1">div1</div><div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4"></div>
</div>
<div class="wrap">
<div class="div1">div1</div><!--
--><div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4"></div>
</div>
缺点：代码的可读性变差。
2.使用浮动float
缺点：浮动元素会脱离文档流，但是也可以使用清楚浮动解决，清楚浮动下篇再提
3.letter-spacing消除 inline-block 元素间的换行符空格间隙
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrap{
width: 500px;
height: 100px;
border: 1px solid red;
/*letter-spacing消除 inline-block 元素间的换行符空格间隙问题*/
letter-spacing: -4px;
}
.wrap div{
display: inline-block;
}
.div1{
width: 100px;
height: 100px;
background-color: #f00;
}
.div2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.div3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
缺点：字体间隔会缩进，如果元素内有字体元素，最好不用这种方法
效果：
4.为父元素中设置font-size: 0，在子元素上重置正确的font-size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrap{
width: 500px;
height: 100px;
border: 1px solid red;
font-size: 0;
}
.wrap div{
display: inline-block;
}
.div1{
width: 100px;
height: 100px;
background-color: #f00;
font-size: 16px;
}
.div2{
width: 100px;
height: 100px;
background-color: #0f0;
font-size: 16px;
}
.div3{
width: 100px;
height: 100px;
background-color: #00f;
font-size: 16px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
缺点：麻烦，代码量多，容易影响到其他样式
5.设置父元素，display:table
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrap{
width: 500px;
height: 100px;
border: 1px solid red;
display: table;
}
.wrap div{
display: inline-block;
}
.div1{
width: 100px;
height: 100px;
background-color: #f00;
}
.div2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.div3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>
缺点：影响到父级元素样式
消除display: inline-block 元素间的换行符空格间隙的方法应该还有很多，目前总结我见过的几种
每种方法都有优缺点，使用时应该根据需求选择相应的方法
