Images displaying a margin with none specified

Question

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.

score 1 · Answer 1 · answered Sep 07 '15 at 21:27

1

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.

answered Sep 07 '15 at 21:27

ryachza

4,460
18
28

score 1 · Accepted Answer · edited May 23 '17 at 12:29

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>

score 0 · Answer 3 · answered Sep 07 '15 at 21:44

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>

Images displaying a margin with none specified

3 Answers3