css 排版问题, 两个盒子排列一起的空隙

Question

直接上码

https://codepen.io/chienweilu...

为什么总会有条空隙？令人不解呀
有大牛可以讲解一下吗... 遇到好多次了, 实在不想用负margin 或是 position 手动调整了...

Answer 1

.speaking元素高度80，减去上下边框2；.control-bar元素高度25，因为是border-box所以不记该元素边框，减去该元素高度后为：80 - 2 - 25 = 53；然后你的.send-button高度为55，所以你的“发送”超出了2px。
划重点：
所有的一切都是基于你的盒子是box-sizing: border-box来的，盒子高度由边框开始计算。
你把.send-button高度设置成54px，正好就是拦住.speaking元素的下边框，设置成53px，就在.speaking里面。
记得同时把text的line-high改成53px哦

Answer 2

行内属性的元素会把空格也算在内容里 大小会根据字体的空格大小来计算

Answer 3

Answer 4

首先不太理解你说的空隙指的是哪里的空隙，目测可能是发送的button往下超出了是吧？其实只要把 .speaking那个类的box-sizing改为content-box就好了。

具体解释就是：
box-sizing = border-box的时候，height 80 = border-top 1 + border-bottom 1 + content 78, 那么你的实际内容只剩下78可用，所以你上面的control-bar已经25了，那么你下面剩下的内容只有78-25=53。但是因为你用的flex-grow，导致下面框架计算高度的时候，变成是父层高度80 - 第一行元素25 = 55，所以自动分配下层55px的高度，55 > 53，所以会超出去。而又因为你的border是父层的border，是固定高度，所以不会自动撑开。

如果你需要的效果是总高80，外框用box-sizing = content-box，height = 78px 就解决了。