Question

早上好！

我的网页（www.tradecaptaincoaching.com）上的顶部图片和生成的表格之间存在着莫名的差距。该表由http://www.tablesgenerator.com/html_tables#生成。花了一整天的时间，我得到的图像和桌子没问题，除了巨大的200像素差距，这让我发疯。

我在Chrome中检查了该页面，看不到任何奇怪的内容。当然，我很绿，我还在使用表格，不得不查找“CSS！”的拼写。 ;）

代码如下。它在香草Drupal Fusion Starter Basic Page上。原谅我糟糕的编码方法。我还在学习。

非常感谢任何帮助和学习！

谢谢大家。

    <img style="padding-top: 20px" alt="Trade Captain Coaching Image" src="/images/LandingImageText.png" style="height:400px; width:960px" usemap="#menumap" />
<map name="menumap">
  <area shape="rect" coords="590,20,650,45" href="http://tradecaptaincoaching.com" alt="Home Page">
  <area shape="rect" coords="675,20,735,45" href="http://tradecaptaincoaching.com/about" alt="About Page">
  <area shape="rect" coords="760,20,830,45" href="http://tradecaptaincoaching.com/contact" alt="Contact Page">
  <area shape="rect" coords="855,20,935,45" href="http://tradecaptaincoaching.com/services" alt="Services Page">
</map>
<style type="text/css">
.tg  {border-collapse:separate;border-spacing:0;margin:0px auto;}
.tg td{font-family:Arial, sans-serif;font-size:14px;border-style:none;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:5px 20px;border-style:none;overflow:hidden;word-break:normal;}
.tg .tg-cfld{font-size:13px;font-family:Verdana, Geneva, sans-serif !important;;color:#000064; padding:5px 20px;}
.tg .tg-e9q7{font-weight:bold;font-size:14px;font-family:Verdana, Geneva, sans-serif !important;;background-color:rgb(116,196,218);color:#000064;line-height: 30px; padding: 0px 0px 0px 20px;}
.tg .tg-031e{vertical-align:top;line-height: 20px; padding:5px 0px 23px 0px}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 960px">
<colgroup>
<col style="width: 320px">
<col style="width: 320px">
<col style="width: 320px">
</colgroup>
  <tr>
    <th class="tg-e9q7">Choose Your Course</th>
    <th class="tg-e9q7">Your Promotion</th>
    <th class="tg-e9q7">Your Program</th>
  </tr>
  <tr>
    <td class="tg-cfld">Text Here. </td>
    <td class="tg-cfld">Text Here. </td>
    <td class="tg-cfld">Text Here. </td>
  </tr>
 <tr>
    <td class="tg-031e" rowspan="4"><img src="/images/NoGold.png" style="height:300px; width:320px" /></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"><img style="margin:0px auto;display:block" src="/images/ContactUs.png" style="height:30px; width:147px" /></td>
  </tr>
  <tr>
    <td class="tg-e9q7" colspan="2">Your First Trade Here is FREE</td>
  </tr>
  <tr>
    <td class="tg-cfld" colspan="2">Text Here. <br><br><br><br><br><br><br></td>
  </tr>
  <tr>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
</table>

Answer 1

首先，为什么你的html style中的body阻止了？没有理由把它放在那里。相反，请将其放在head区块中。

其次，在您指向的页面中，您的<br>阻止后会有多个<script>个元素。仅这些将在标题图像和表格之间添加不需要的空间：

<br>
<br>
<br>

最后，您要在图片<br>定义中添加更多map个元素。根本不应该有任何休息。由于休息在这种情况下没有意义，因此它们只是在图像之后添加到页面的可见流中。

Answer 2

感谢大家的帮助和见解。我终于通过删除代码中的所有换行符来解决它。这使代码几乎不可读。但是，无论如何，CSS对我来说几乎是不可读的。所以周围的事情会发生;）我的顶级图像和桌子之间仍然有一个小小的中断，这仍然是一个谜。但是我对任何一个CSS问题都有8小时的限制，这已经超出了。

再次感谢你们所有的圣徒！ CA

图像和表格之间的原因不明

2 个答案: