我不知道大家有没有遇到过这个问题,就是两个inline-block元素,如果是空的两个inline-block元素,那么就不会影响,如我们所想的显示。
但是当我们往其中一个添加内容时,就会发生不可思议的一幕!
元素错位了,可是为什么没有内容时,不会相互影响呢?这时我们在想肯定是内容影响的,所以我们给两个div都加上内容。
可以看到两个元素都回到了我们想让它呈现的位置。那为什么inline-block元素的位置会受到其内容的影响呢?我们可以查到这样一句话
inline-block元素可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。
总结如下
1.同一行的行内元素对齐方式默认是底部对齐,即vertical-align:baseline
如图
2.对于内容为空的inline-block元素而言,该元素的基线就是它的margin底边缘,否则就是元素的内部最后一行内联元素的基线
仔细品这句话,看下图便知!