这是我正在使用的实时沙箱页面：https://www.wingsfund.com/test1.html我正在尝试堆叠图像和表格以使其看起来像这样：https://www.wingsfund.com/但是为什么这些空白区域会垂直分布它？我如何才能将所有元素堆叠在一起并像粘在一起？
http://wingsfund.com/imgs/HOME-BLUE.jpg
<center><img src="http://wingsfund.com/imgs/blue-strip.jpg" display: "block" width="1000" height="20" line-height= "0"; alt=""/></center>
答案 0 :(得分：1)
您没有在display: block属性上正确设置style。
<center><img src="http://wingsfund.com/imgs/blue-strip.jpg" style="display: block"></center>
或者您可以简单地全局设置css，而不是在每个元素上都设置css。
img {
display: block;
}<html>
<head>
<meta charset="UTF-8">
<title>test1</title>
</head>
<body bgcolor="#FFFFFF" background="http://wingsfund.com/imgs/wings-background-color.jpg" background-repeat:="" no-repeat;="">
<table width="1000" border="0" align="center" cellpadding="17" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#FFFFFF">
<p><img src="http://wingsfund.com/imgs/wingsfund-1000.jpg" width="350" height="60" alt=""><br>
</p>
</td>
</tr>
</tbody>
</table>
<table width="1000" height="55" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="200"><img src="http://wingsfund.com/imgs/HOME-BLUE.jpg" width="200" height="55" alt=""></td>
<td width="200">
<a href="https://www.google.com/" target="_self"><img src="http://wingsfund.com/imgs/what-we-seek.jpg" width="200" height="55" onmouseover="this.src='http://wingsfund.com/imgs/what-we-seek-mouse.jpg'" onmouseout="this.src='http://wingsfund.com/imgs/what-we-seek.jpg'" border="0"></a>
<a href="/what-we-seek.html"></a>
</td>
<td width="200">
<a href="https://www.google.com/" target="_self"><img src="http://wingsfund.com/imgs/our-approach.jpg" width="200" height="55" onmouseover="this.src='http://wingsfund.com/imgs/our-approach-mouse.jpg'" onmouseout="this.src='http://wingsfund.com/imgs/our-approach.jpg'" border="0"></a>
<a href="/what-we-seek.html"></a>
</td>
<td width="200">
<a href="https://www.google.com/" target="_self"><img src="http://wingsfund.com/imgs/public-market.jpg" width="200" height="55" onmouseover="this.src='http://wingsfund.com/imgs/public-market-mouse.jpg'" onmouseout="this.src='http://wingsfund.com/imgs/public-market.jpg'" border="0"></a>
<a href="/what-we-seek.html"></a>
</td>
<td width="200">
<a href="https://www.google.com/" target="_self"><img src="http://wingsfund.com/imgs/about-us.jpg" width="200" height="55" onmouseover="this.src='http://wingsfund.com/imgs/about-us-mouse.jpg'" onmouseout="this.src='http://wingsfund.com/imgs/about-us.jpg'" border="0"></a>
<a href="/what-we-seek.html"></a>
</td>
</tr>
</tbody>
</table>
<center><img src="http://wingsfund.com/imgs/blue-strip.jpg" display:="" "block"="" width="1000" height="20" line-height="0" ;="" alt=""></center>
<center><img src="http://wingsfund.com/imgs/banner.jpg" width="1000" height="565" line-height="0" ;="" alt=""></center>
<table background="http://wingsfund.com/imgs/gray-bar.jpg" width="1000" height="92" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family: arial; text-align: center; font-size: 14px;">Wings Fund, Inc. is a private investment company that concentrates on early stage companies with breakthrough technologies.<br> We also help fund acquisitions for our portfolio companies.</td>
</tr>
</tbody>
</table>
<table width="1000" border="0" align="center" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#E5C200"> </td>
</tr>
</tbody>
</table>
<table width="1000" border="0" align="center" cellpadding="30" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#FFFFFF" style="font-family: arial; font-size: 14px;">Copyright © Wings Fund, Inc. 2019</td>
</tr>
</tbody>
</table>
</body>
</html>
答案 1 :(得分：1)
他们使用了tr，然后在该tr上放置了背景，因此整个td都被填充了，没有显示空白。
<tr>
<td colspan="11" style="background-image:url(wp-..........>
</td>
</tr>
您所做的完全不同。 我要告诉您检查您的填充和边距，但似乎它们都设置为0px。但是标签为您提供了这些空白，但我不知道为什么
答案 2 :(得分：1)
但是到目前为止，我已经看过HTML源代码，并且根据我的经验，我认为使用表格不是html的好习惯。保留元素原样并使用display：block或display：inline-block会容易得多，但是在大多数情况下，请充分利用margin：auto。
答案 3 :(得分：1)
<tbody>
<tr>
<td bgcolor="#FFFFFF">
<p><img src="http://wingsfund.com/imgs/wingsfund-1000.jpg" width="350" height="60" alt=""><br>
</p>
</td>
</tr>
</tbody>
</table>
<table width="1000" height="55" border="0" align="center" cellpadding="0" cellspacing="0" style="display: block;">
<tbody>
<tr>
<td width="200"><img src="http://wingsfund.com/imgs/HOME-BLUE.jpg" width="200" height="55" alt=""></td>
<td width="200">
<a href="https://www.google.com/" target="_self"><img src="http://wingsfund.com/imgs/what-we-seek.jpg" width="200" height="55" onmouseover="this.src='http://wingsfund.com/imgs/what-we-seek-mouse.jpg'" onmouseout="this.src='http://wingsfund.com/imgs/what-we-seek.jpg'" border="0"></a>
<a href="/what-we-seek.html"></a>
</td>
<td width="200">
<a href="https://www.google.com/" target="_self"><img src="http://wingsfund.com/imgs/our-approach.jpg" width="200" height="55" onmouseover="this.src='http://wingsfund.com/imgs/our-approach-mouse.jpg'" onmouseout="this.src='http://wingsfund.com/imgs/our-approach.jpg'" border="0"></a>
<a href="/what-we-seek.html"></a>
</td>
<td width="200">
<a href="https://www.google.com/" target="_self"><img src="http://wingsfund.com/imgs/public-market.jpg" width="200" height="55" onmouseover="this.src='http://wingsfund.com/imgs/public-market-mouse.jpg'" onmouseout="this.src='http://wingsfund.com/imgs/public-market.jpg'" border="0"></a>
<a href="/what-we-seek.html"></a>
</td>
<td width="200">
<a href="https://www.google.com/" target="_self"><img src="http://wingsfund.com/imgs/about-us.jpg" width="200" height="55" onmouseover="this.src='http://wingsfund.com/imgs/about-us-mouse.jpg'" onmouseout="this.src='http://wingsfund.com/imgs/about-us.jpg'" border="0"></a>
<a href="/what-we-seek.html"></a>
</td>
</tr>
</tbody>
</table>
<center><img src="http://wingsfund.com/imgs/blue-strip.jpg" width="1000" height="20" line-height="0" ;="" alt="" style="display: block;"></center>
<center><img src="http://wingsfund.com/imgs/banner.jpg" width="1000" height="565" line-height="0" ;="" alt=""></center>
<table background="http://wingsfund.com/imgs/gray-bar.jpg" width="1000" height="92" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family: arial; text-align: center; font-size: 14px;">Wings Fund, Inc. is a private investment company that concentrates on early stage companies with breakthrough technologies.<br> We also help fund acquisitions for our portfolio companies.</td>
</tr>
</tbody>
</table>
<table width="1000" border="0" align="center" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#E5C200"> </td>
</tr>
</tbody>
</table>
<table width="1000" border="0" align="center" cellpadding="30" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#FFFFFF" style="font-family: arial; font-size: 14px;">Copyright © Wings Fund, Inc. 2019</td>
</tr>
</tbody>
</table>
</body>
在表格中使用显示块属性
<table width="1000" height="55" border="0" align="center" cellpadding="0"
cellspacing="0" style="display: block;">
以及图像中的
<center><img src="http://wingsfund.com/imgs/blue-strip.jpg" width="1000" height="20" line-height="0" ;="" alt="" style="display: block;"></center>
答案 4 :(得分：0)
您已全局设置了line-height属性。 将此添加到您的HTML中（最好在头部）：
<style type="text/css">
html {
line-height: 0;
}
</style>