【HTML+CSS】写网页的时候经常碰到元素之间存在一个缝隙是为什么

先上结论：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：本来都是内联元素，何必还要浮动呢。

posted @ 2017-07-16 19:47  你大斌哥  阅读(2562)  评论(0)  编辑  收藏  举报