html - 图像之间的间隙

Question

我正在尝试为朋友的博客（http://testcheww.blogspot.com/）制作导航栏，但我总是得到这个小空间：

我试图改变任务，支持和游戏位置，但它不起作用。关于如何修复它的任何建议？这是代码：

<center>
  <div style='background-image: url(http://files.tinkatollidunes.com/nav/left.png) ; background-size: 45px 86px; height: 86px; width: 45px; border: 0px; margin-left: -1139px; margin-bottom: -80x;'/>
    </center>
    <center>
<div class='homebutton' style='position:relative; left:-477px; top:-86px;'>
    <a href='http://www.tinkatollidunes.com/'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/home.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/homehover.png' width='141px'/> 
    </a>
</div>
    </center>
    <center>
      <div style='height: 86px; width: 63px; border: 0px; margin-top: -172px; margin-left: -750px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/home-about.png' width='63px'/>
      </div>
    </center>
    <center>
<div class='aboutbutton' style='position:relative; left:-273px; top:-86px; margin-bottom: -82px;'>
    <a href='http://www.tinkatollidunes.com/p/about.html'>
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/about.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/abouthover.png' width='141px'/> 
    </a>
</div>
    </center>
    <center>
      <div style='height: 86px; width: 72px; border: 0px; margin-top: -172px; margin-left: -333px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/about-guides.png' width='72px'/>
      </div>
    </center>
    <center>
        <div class='guidesbutton' style='position:relative; left:-60px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/guides.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/guides.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/guideshover.png' width='141px'/> 
</a> 
</div>
    </center>
        <center>
      <div style='height: 86px; width: 58px; border: 0px; margin-top: -172px; margin-left: 78px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/guides-quests.png' width='58px'/>
      </div>

<div class='questsbutton' style='position:relative; left:137px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/quests.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/quests.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/questshover.png' width='141px'/> 
</a> 
</div>
    </center>
            <center>
      <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 470px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/quests-support.png' width='52px'/>
      </div>
    </center>
        <center>
<div class='supportbutton' style='position:relative; left:334px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/support-us.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/support.png' width='150px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/supporthover.png' width='150px'/> 
</a> 
</div>
    </center>
    <center>
      <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 874px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/support-play.png' width='54px'/>
      </div>
    </center>
        <center>
      <div style='height: 86px; width: 142px; border: 0px; margin-top: -86px; margin-right: -1021px;'><a href='http://www.tinkatolli.com/play/'><img height='86' src='http://files.tinkatollidunes.com/nav/play.png' width='142'/></a>
      </div>
    </center>

Answer 1

您的图像之间有空格。

<img (content) /> 
<img (content) /> 

这里两个图像之间的返回与空格的功能完全相同。所以解决办法就是删除return。

<img (content) /><img (content) />

就是这样。

顺便说一句，您不应该使用width和height属性（至少从本世纪初开始就已弃用），但如果您仍然使用它们，请为它们的值指定一个数字，而不是 css 样式的长度。
也就是说，141，不是141px。
但实际上使用 CSS 要好得多。<center>元素同上。

除非您使用 XHTML，否则无需使用/>. 只会>做得很好。

Answer 2

我把Quests的宽度改成143，把Support的宽度改成152，各增加2个像素（a和b），看起来还不错。

可能不是修复它的最佳方法，但我不太了解您的布局。

Answer 3

试试这个：

<center>
  <div style='background-image: url(http://files.tinkatollidunes.com/nav/left.png) ; background-size: 45px 86px; height: 86px; width: 45px; border: 0px; margin-left: -1139px; margin-bottom: -80x;'/>
    </center>
    <center>
<div class='homebutton' style='position:relative; left:-477px; top:-86px;'>
    <a href='http://www.tinkatollidunes.com/'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/home.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/homehover.png' width='141px'/> 
    </a>
</div>
    </center>
    <center>
      <div style='height: 86px; width: 63px; border: 0px; margin-top: -172px; margin-left: -750px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/home-about.png' width='63px'/>
      </div>
    </center>
    <center>
<div class='aboutbutton' style='position:relative; left:-273px; top:-86px; margin-bottom: -82px;'>
    <a href='http://www.tinkatollidunes.com/p/about.html'>
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/about.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/abouthover.png' width='141px'/> 
    </a>
</div>
    </center>
    <center>
      <div style='height: 86px; width: 72px; border: 0px; margin-top: -172px; margin-left: -333px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/about-guides.png' width='72px'/>
      </div>
    </center>
    <center>
        <div class='guidesbutton' style='position:relative; left:-60px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/guides.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/guides.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/guideshover.png' width='141px'/> 
</a> 
</div>
    </center>
        <center>
      <div style='height: 86px; width: 58px; border: 0px; margin-top: -172px; margin-left: 78px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/guides-quests.png' width='58px'/>
      </div>

<div class='questsbutton' style='position:relative; left:137px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/quests.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/quests.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/questshover.png' width='141px'/> 
</a> 
</div>
    </center>
            <center>
      <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 458px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/quests-support.png' width='52px'/>
      </div>
    </center>
        <center>
<div class='supportbutton' style='position:relative; left:334px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/support-us.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/support.png' width='150px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/supporthover.png' width='150px'/> 
</a> 
</div>
    </center>
    <center>
      <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 870px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/support-play.png' width='54px'/>
      </div>
    </center>
        <center>
      <div style='height: 86px; width: 142px; border: 0px; margin-top: -86px; margin-right: -1021px;'><a href='http://www.tinkatolli.com/play/'><img height='86' src='http://files.tinkatollidunes.com/nav/play.png' width='142'/></a>
      </div>
    </center>