先上結論：HTML中代碼換行和空格會被瀏覽器解析成空文本節點
測試代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0; margin: 0; border: 0;} input{ width: 300px; height: 28px; border: 1px solid red; } button{ width: 100px; height: 30px; background-color: orange; } </style> </head> <body> <input type="text" name="" value="請輸入....."> <button>確認</button> </body> </html>
效果如圖
可以看到，margin，padding等值明明被設置為0，元素之間依然有一個空隙。
更改一下結構部分代碼：
<body>
<input type="text" name="" value="請輸入....."><button>確認</button>
</body>
效果如下：
可以看到，只是將代碼寫在了一行，空隙便消失了。
接着在更改一下結構部分代碼：
<body>
<input type="text" name="" value="請輸入....."> <button>確認</button>
</body>
button和input之間多了一個空格
效果如下：
空隙又回來了，結論成立。
我想這也是網頁中充斥着大量浮動的一個原因吧（浮動可以解決縫隙）。
PS：本來都是內聯元素，何必還要浮動呢。