html - 图像和表格之间无法解释的空间

Question

早上好!

我的网页 (www.tradecaptaincoaching.com) 上的顶部图像和生成的表格之间存在莫名其妙的差距。该表由 http://www.tablesgenerator.com/html_tables# 生成.在上面花了一整天之后，除了 200 像素的巨大差距让我发疯之外，我的图像和表格都还不错。

我已经检查了 Chrome 中的页面，没有发现任何异常。当然，我新手还在用表格，还要查“CSS”的拼写! ;)

代码如下。它位于 Vanilla Drupal Fusion Starter 基本页面上。原谅我糟糕的编码方法。我还在学习。

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

谢谢大家

    <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

首先，为什么你的style在您的 html 中阻止 body ？没有理由把它放在那里。相反，把它放在你的 head 中 block 。

其次，在您指向的页面中，您有几个 <br> <script> 之后的元素堵塞。仅这些就会在您的标题图片和表格之间添加不需要的空间:

<br>
<br>
<br>

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