两个并列inline-block元素互相影响问题

405 阅读2分钟

我不知道大家有没有遇到过这个问题,就是两个inline-block元素,如果是空的两个inline-block元素,那么就不会影响,如我们所想的显示。

在这里插入图片描述

在这里插入图片描述

但是当我们往其中一个添加内容时,就会发生不可思议的一幕!

在这里插入图片描述

元素错位了,可是为什么没有内容时,不会相互影响呢?这时我们在想肯定是内容影响的,所以我们给两个div都加上内容。

在这里插入图片描述

可以看到两个元素都回到了我们想让它呈现的位置。那为什么inline-block元素的位置会受到其内容的影响呢?我们可以查到这样一句话

inline-block元素可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。

总结如下

1.同一行的行内元素对齐方式默认是底部对齐,即vertical-align:baseline

如图 在这里插入图片描述

2.对于内容为空的inline-block元素而言,该元素的基线就是它的margin底边缘,否则就是元素的内部最后一行内联元素的基线

仔细品这句话,看下图便知! 在这里插入图片描述

记得是元素内部最后一行内联元素的基线!!

在这里插入图片描述

简单地就以上这种情况来说,没有内容的话会基于它的margin底边缘也就是它的下边缘对齐,而包含内容的话会基于其内部内联元素的基线对齐,所以会造成这种一上一下的情况。

解决办法:

1、float浮动,这是备选方案,脱离文档流后页面布局不好控制

2、给所有元素加内容例如空格符

3、最实用的就是设置所有内联元素 vertical-align: top/middle/bottom; 属性,改变默认设置