Question

我的网页顶部有横幅图片。它包含浏览器默认样式，填充和边距在两侧创建空白区域。我已经在主体和*选择器中将填充和边距设置为0px，但是仍然保留了空白区域。

我添加了一个指向normalize.css表here的链接，但仍有空格。我还能做些什么来摆脱白色空间？

<body>
    <div class = 'main-header'>

        <img src='http://imageserver.amlaw.com/publications/LAW-14-05656_header.jpg'>

</div>
</body>

和css是：

* {
margin: 0;
padding:0;
border=0;
}

Answer 1

尝试添加：

.main-header { line-height: 0; }

这将删除图像下的空白，该图像是为在基线下延伸的字母部分保留的。但它只应在仅包含图像（即没有文本）的元素中使用。

（顺便说一下：border=0;不是有效设置 - 应该是border: none;）

Answer 2

图像底部的空白是因为它默认是内联的，它不是边距或填充。有三种方法可以摆脱图像下的空间：

这是一个 JSFiddle 来试用它。

如果要删除右侧的空格，横幅需要width: 100%，然后它将填满整个宽度：

* {
    margin: 0;
    padding: 0;
    border: none;
}
img {
    display: block;
    width: 100%; /* insert this */
}

<body>
    <div class='main-header'>
        <img src='http://imageserver.amlaw.com/publications/LAW-14-05656_header.jpg'>
    </div>
</body>