如何减少html中的空白？

Question

我想要的输出是：

我的事实上的输出有太多的空白区域：

代码是：

<div id="tabarea"><ul id="tabnav"><li class="tab_all"><strong>All</strong></li><li class="tab_private"><a title="Display only info from privates" href="?t=&f=p" >Private<span class="tab_right_links"></span></a></li><li class="tab_company"><a title="Show only info from companies" href="?t=&f=c" >Company<span class="tab_right_links"></span></a></li></ul></div><table><tr><td><table class="listingWithImages" border="0px"><tr><td>4 hours, 3 minutes</td><td><img src="http://localhost:8080/_ah/img/8oUwXdeweiQmEq_ESy33RQ===s100"></td><td><a href="/servead/105">Test2</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYaQw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>4 hours, 14 minutes</td><td><img src="http://localhost:8080/_ah/img/HmoH2SsmUcoPOKiJZM-gVw===s100"></td><td><a href="/servead/102">Test</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYZgw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>4 hours, 15 minutes</td><td><img src="http://localhost:8080/_ah/img/zrBsUrSO6T_g48xvf_3GDQ===s100"></td><td><a href="/servead/100">Test</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYZAw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>4 hours, 16 minutes</td><td><img src="http://localhost:8080/_ah/img/mTQP6dGy9OJqChqujxL6PA===s100"></td><td><a href="/servead/98">Test</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYYgw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>4 hours, 17 minutes</td><td><img src="http://localhost:8080/_ah/img/KVMHyBo32fWE_ruH8a7zjQ===s100"></td><td><a href="/servead/96">Test</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYYAw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>4 hours, 19 minutes</td><td></td><td><a href="/94/test">Test</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYXgw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>4 hours, 22 minutes</td><td><img src="/images/93.png" alt="Test"/></td><td><a href="/90/test">Test</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYWgw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>4 days, 15 hours</td><td></td><td><a href="/72/computer-services">Computer services</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYSAw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>4 days, 22 hours</td><td></td><td><a href="/68/test">Test</a><br/>

EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYRAw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>4 days, 22 hours</td><td></td><td><a href="/67/test">Test</a><br/>
EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYQww" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>4 days, 22 hours</td><td></td><td><a href="/64/test">Test</a><br/>
EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYQAw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>5 days, 17 hours</td><td></td><td><a href="/63/computer-services">Computer services</a><br/>

EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYPww" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>5 days, 18 hours</td><td></td><td><a href="/57/computer-services">Computer services</a><br/>
EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYOQw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>5 days, 20 hours</td><td></td><td><a href="/52/computer-services">Computer services</a><br/>
EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYNAw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>5 days, 21 hours</td><td><img src="http://localhost:8080/_ah/img/hFT-PUQJfOX1jh_P5Zl80A===s100"></td><td><a href="/servead/50">Computer services</a><br/>

EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYMgw" style="margin:0; padding:0 display:inline"></span></td><td></td></tr><tr><td>5 days, 22 hours</td><td><img src="http://localhost:8080/_ah/img/SnoEEZiYDBbWNauTqvKhTg===s100"></td><td><a href="/servead/46">Computer services</a><br/>
EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYLgw" style="margin:0; padding:0 display:inline"></span></td><td></td></tr><tr><td>5 days, 22 hours</td><td></td><td><a href="/42/computer-services">Computer services</a><br/>
EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYKgw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>5 days, 22 hours</td><td></td><td><a href="/40/computer-services">Computer services</a><br/>
EUR&nbsp;220

</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYKAw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>5 days, 22 hours</td><td></td><td><a href="/39/frankwin-international-educatoin-and-immigration">Frankwin International, Educatoin and Immigration</a><br/>
EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYJww" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>5 days, 22 hours</td><td></td><td><a href="/36/computer-services">Computer services</a><br/>
EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYJAw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>6 days, 2 hours</td><td></td><td><a href="/34/"></a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYIgw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>6 days, 3 hours</td><td></td><td><a href="/33/"></a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYIQw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>6 days, 3 hours</td><td></td><td><a href="/29/computer-services">Computer services</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYHQw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>6 days, 3 hours</td><td></td><td><a href="/28/computer-services">Computer services</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYHAw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>6 days, 3 hours</td><td></td><td><a href="/25/computer-services">Computer services</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYGQw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>1 week</td><td></td><td><a href="/22/test">Test</a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYFgw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>1 week</td><td></td><td><a href="/21/"></a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYFQw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>1 week</td><td></td><td><a href="/18/"></a><br/></td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYEgw" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr><tr><td>1 week, 6 days</td><td><img src="/images/6.png" alt="Computer ..."/></td><td><a href="/3/computer-services">Computer services</a><br/>

EUR&nbsp;220
</td><td><span id="ahFjbGFzc2lmaWVkc21hcmtldHIICxICQWQYAww" style="margin:0; padding:0 display:inline">Sweden</span></td><td></td></tr></table></td><td><script type="text/javascript"><!--
google_ad_client = "ca-pub-7211665888260307";
/* rektanglar i lista */
google_ad_slot = "7024728308";
google_ad_width = 336;
google_ad_height = 280;
//--></script><script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script><br><script type="text/javascript"><!--
google_ad_client = "ca-pub-7211665888260307";
/* rektanglar i lista */
google_ad_slot = "7024728308";
google_ad_width = 336;
google_ad_height = 280;
//--></script><script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></td></tr></table></div>

你能看到我应该怎样做才能减少我得到的空白吗？谢谢

编辑：在某个地方的代码中插入<br>会缩小差距：

我认为上面第一个<tr>级别的差距不应该存在。

我已将代码上传到托管：www.montao.com.br/li

Answer 1

我无法读到你粘贴的那种可怕的混乱，但我认为它非常简单。您可能正在使用表格进行布局。它看起来像这样：

<table>
  <tr>
    <td><!-- here are your images (elements.. list.. whatever) --></td>
    <td><!-- ads are here --></td>
  </tr>
</table>

包含广告的单元格被拉伸（因此广告可以适应）并且它也会延伸到行中的其他单元格。

解决方案？将广告移到内容表之外：）

Answer 2

您可以将内容包装在div

中

<div id="content" >Your content Here</div>

并给它一个负余量：

#content{
margin: - 100px;
}

或者您可以尝试删除您的网页并以不同的方式进行设计。

修改

另一种解决方案是将广告包装在div中，并将内容浮动在彼此旁边：

#content , #ads{
float: left;
}

请确保稍微扩展主内容框，否则无效。

编辑2：

改为使用表格标签。

<table border="1">
<tr>
<td height="600" width="600">CONTENT</td>
<td height="600"  width="200">SIDEBAR</td>
</tr>

</table>

在表中的所有内容完全加载之前，此代码不会显示任何内容

因此我推荐使用css，这对你有好处。

：）