我們可以發現：兩個行內塊元素，寬度相加剛好等於父盒子容器的元素，但第二個元素掉在第二行，這是什么問題呢？
我們先來看一下效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .container{ width: 1024px; height: 1000px; margin: 0 auto; /*font-size: 0;*/加上過后就能解決為啥行內塊元素卻不在一行 } .container div{ display: inline-block; } .left{ width: 80%; height: 100%; background-color: #0086b3; } .right{ width: 20%; height: 100%; background-color: pink; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
效果圖：
我們可以看到這兩個行內塊元素並不在一行，這個原因其實就是，兩個div之間存在換行，會把它看成一個空格，如果兩個div之間不換行，或者在容器里添加font-size=0就能
解決問題，就是讓中間的換行不占位置。
加上過后就會產生理想的效果：
