Question

我已经为足球队写了一份非常基本的报名表，该报表正如预期的那样工作。

然而，在页面底部添加两个占位符图像后，它们在Chrome，Firefox和IE11之间显示出相互之间的差距。我想知道为什么会这样，因为我已经使用了这个CSS Reset，并且我没有为图像指定任何边距或间距。此外，使用＆＃39; Inspect元素＆＃39; Chrome中没有以任何方式显示差距的任何图形表示。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

我提供了最少量的代码，因为这仍然表现出相同的行为。任何信息都将非常感激。

Answer 1

这是可见的img标记之间的换行符（任何数量的空格都被视为单个空格）。您可以将代码放在同一行，也可以将font-size:0px;添加到#sponsors规则中。

Answer 2

默认情况下，图片是内嵌元素，因此whitespace会生效。

删除此选项的一个选项是将父项的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>

Answer 3

您可以使用HTML注释删除因将<img>标记放在两个单独的行上而导致的内联空格。

<div class="wrapper">
    <div id="sponsors">
        <img alt="Sponsor 1 Place-holder" src="..." /><!--
     --><img alt="Sponsor 2 Place holder" src="..." />
    </div>
</div>

...这与将其写成

相同

<div class="wrapper">
    <div id="sponsors">
        <img alt="..." src="..." /><img alt="..." src="..." />
    </div>
</div>

显示未指定边距的图像

3 个答案: