先上结论：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：本来都是内联元素，何必还要浮动呢。
扫一扫
956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
