inline-block，一個奇怪的問題：中間div掉下來
阿新 • • 發佈：2018-09-21
html splay back 怎麽 htm image oct 代碼 mage
先上代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> html body { padding: 0; margin: 0 } </style> </head> <body> <div > <div style="width: 30%;background:blue;height: 500px;display: inline-block;font-size: 15px"></div> <div style="width:30%;;height: 500px;background: green;display: inline-block;font-size: 15px; "> </div> <div style="width:30%;background: red;height: 500px;display: inline-block;font-size: 15px"></div> </div> </body></html>
運行後效果如下：
圖上可以看出，這裏存在兩個問題：1、div之間有間隙 2、如果在中間添加內容，會出現詭異效果：
怎麽解決？
1、解決間隙，把父元素的font-size的設置為0
2、把加內容的的div增加樣式：vertical-align:top
註意：不要忘了把中間div加font-size:15px
inline-block，一個奇怪的問題：中間div掉下來