inline-block

这是盒模型的一种，它叫行内块元素。和块元素不同的是，块元素独占一行。行内块元素却能适配宽度，使得一行中可以排列多个行内块元素，但是当块元素大小不一样的时候，它们会靠底部对齐。
但是我们可以通过调整vertical-align来解决问题

留白问题

1. inline-block之间的留白

首先我们看这样一段代码：
css

.block{}
.block1{display: inline-block;width: 100px;height: 100px;background-color: #FF0000;
}
.block2{display: inline-block;width: 100px;height: 100px;background-color: #7CFC00;
}

html

<div class="block"><div class="block1"></div><div class="block2"></div>
</div>

效果：

我们观察到了，中间有块留白

产生的原因：
产生的原因很简单：就是你敲了一个回车符，这个回车符被当做空格处理了

如果我们这样修改代码

<div class="block"><div class="block1"></div><div class="block2"></div>
</div>

我们再来看看效果：

不过这样写有点鸡肋，我们有没有更简单的方法解决空白呢？

其实是有的

1.我们用注释连接

<div class="block"><div class="block1"></div><!----><div class="block2"></div>
</div>

2.我们对父元素设置：font-size:0

.block{font-size:0
}

既然是空白字符，但是我设置字体是0，那么空白字符就消失了，但是这样做的缺点就是，我浏览器默认16px字体大小没了，子元素如果有文字的话，那么每个都要设置font-size了

3.使用浮动代替

.block1{display: inline-block;width: 100px;height: 100px;background-color: #FF0000;float: left
}
.block2{display: inline-block;width: 100px;height: 100px;background-color: #7CFC00;float: left
}

实现效果：

以上就是解决inline-block之间留白的办法

2 inline-block和block之间的留白

我们首先科普一下，img标签是inline-block盒子

然后我们看下代码：

.block {width: 300px;
}
.block>div {background-color: #FF0000;
}

<div class="block"><img src="pic3.png" width="100%"><div>大家好</div>
</div>

显示的效果：

我们明显看到了这个留白，这是怎么回事呢？

其实inline-block的对其方式基线对其，它和block直接默认有3个像素的基线差

我们怎么解决问题呢？

1.我们设置img为block元素，不让它是inline-block了

img{display:block
}

2.设置浮动

img{float:left
}

3.设置父容器为弹性盒子

.block{display:flex;flex-direction:column
}

4.我们对img重新设置垂直对其方式

img{vertical-align: middle;
}

效果：

上述方法，其实设置浮动，设置父容器为弹性盒子其实都会触发display:block的类型格式化，换句话说，设置浮动、定位、flex布局和display:block是等价的