Images displaying a margin with none specified [duplicate] - html

Question

This question already has answers here:
Images side by side without any space between them
(5 answers)
Closed 7 years ago.
I've written a very basic registration form for a football team, which is working as expected.
However, after adding two place-holder images at the bottom of the page, they are exhibiting a gap between each other in Chrome, Firefox and IE11. I'm wondering why this would be, as I've used this CSS Reset, and I haven't specified any margins or spacing for the images. Furthermore, using 'Inspect element' in Chrome does not show any graphical representation of the gap in any way.
html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}
.wrapper {
margin: 50px auto;
max-width: 728px;
min-width: 320px;
}
#sponsors {
display: block;
margin-top: 10px;
text-align: center;
}
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
<img alt="Sponsor 2 Place holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
</div>
</div>
I've provided the minimal amount of code as this still demonstrates the same behaviour. Any information would be much appreciated.

Answer 1

Images are inline elements by default and therefore whitespace has an effect.
One option to remove this is to set the font-size of the parent to 0.
See this question on SO for others.
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
.wrapper {
margin: 50px auto;
max-width: 728px;
min-width: 320px;
}
#sponsors {
display: block;
margin-top: 10px;
text-align: center;
font-size: 0;
}
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
<img alt="Sponsor 2 Place holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
</div>
</div>

Answer 2

This is the newline between the img tags being visible (any amount of whitespace is treated as a single space). You could put the tags on the same line, or add font-size:0px; to your #sponsors rule.

Answer 3

You can use HTML comments to remove the inline whitespace caused by putting the <img> tags on two separate lines.
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="..." /><!--
--><img alt="Sponsor 2 Place holder" src="..." />
</div>
</div>
... which would be the same as writing it as
<div class="wrapper">
<div id="sponsors">
<img alt="..." src="..." /><img alt="..." src="..." />
</div>
</div>