.speaking元素高度80，減去上下邊框2；.control-bar元素高度25，因為是border-box所以不記該元素邊框，減去該元素高度后為：80 - 2 - 25 = 53；然后你的.send-button高度為55，所以你的“發(fā)送”超出了2px。
劃重點：
所有的一切都是基于你的盒子是box-sizing: border-box來的，盒子高度由邊框開始計算。
你把.send-button高度設置成54px，正好就是攔住.speaking元素的下邊框，設置成53px，就在.speaking里面。
記得同時把text的line-high改成53px哦

行內屬性的元素會把空格也算在內容里 大小會根據字體的空格大小來計算

首先不太理解你說的空隙指的是哪里的空隙，目測可能是發(fā)送的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 就解決了。