html - 显示未指定边距的图像

Question

我为足球队编写了一个非常基本的注册表，它按预期工作。

但是，在页面底部添加两个占位符图像后，它们在 Chrome、Firefox 和 IE11 中表现出彼此之间的差距。我想知道为什么会这样，因为我已经使用了这个 CSS Reset ，并且我没有指定图像的任何边距或间距。此外，在 Chrome 中使用“检查元素”不会以任何方式显示间隙的任何图形表示。

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>

我提供了最少量的代码，因为这仍然演示了相同的行为。任何信息将不胜感激。

Answer 1

默认情况下，图像是内联元素，因此空白会产生效果。

删除此问题的一个选项是将父级的font-size 设置为 0。

See this question on SO对于其他人。

* {
  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>