Question

请参阅此demo

我已将<body>设置为根本没有边距，但页面末尾的1 * 1图像会产生很大的余量。

添加/删除当前的css重置无济于事。

是什么导致了这个？唯一可以避免的方法是将图像设置为不可见/隐藏，但必须采用另一种方式。

HTML：

<div id="container"></div>
<img src="zzz.png" width="1" height="1"/>

CSS：

#container {
    width: 1080px;
    min-height: 1200px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    border-bottom: 0;
    overflow: hidden;
    background-color: green;
    margin-bottom:0;
    padding:0;
}

body {
    color: #FBFBFB;
    background-color: red;
    font-style: normal;
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    font-family: serif;
    font-weight: 400;
    line-height: 1;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, button, canvas, caption, center, cite, code, dd, del, details, dfn, dl, dt, em, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, input, ins, kbd, label, legend, li, menu, nav, object, ol, p, pre, q, s, samp, section, select, small, strike, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, video {
    font-size: 100%;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}
html {
    font-size-adjust: auto;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
}

table {
    table-layout: auto;
    empty-cells: show;
}
img {
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}

Answer 1

http://jsfiddle.net/6vebpjny/1/

<div id="container"></div>
<img src="zzz.png" width="1" height="1" style="float:left"/>

如果有疑问则浮出水面。

将图像浮动。

Answer 2

line-height导致此差距显示为16px。

您应该将此图像放在不会添加其他行的位置。否则，使用position: absolute将其从布局中删除，或者将其浮动为@Nicholas Young说。

Answer 3

如果要确保1x1像素信标图像不会打开任何空白区域，在img标记中将height属性设置为0，并在CSS中设置display: block。

无论高度或宽度属性如何，图像仍会加载。

body {
    background-color: red;
    padding: 0;
    margin: 0;
}
#container {
    width: auto;
    min-height: 800px;
    background-color: green;
}
img.beacon {
    display: block;
}

<div id="container"></div>
<img class="beacon" src="zzz.png" width="1" height="0"/>

在创建任何边距之前防止1 * 1像素图像

3 个答案: