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

クエストの幅を 143 に、サポートの幅を 152 に、それぞれ 2 ピクセルずつ (a と b) 増やしたところ、見栄えがよくなりました。

おそらくそれを修正する最善の方法ではありませんが、レイアウトがよくわかりません。

Answer 2

これを試して：

<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>