Take a look at this demonstration
Even though I have set the <body> to have no margins whatsoever, a 1*1 image at the bottom of the page is causing a significant margin.
Adding or removing the current CSS reset does not resolve the issue.
What could be causing this problem? The only workaround I can think of is to hide the image, but there must be another solution.
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;
}