[問題] CSS排版問題-如何去掉區塊間的縫隙

[hcl012 (怪龍-卡西歐魯)]

各位前輩好，我有個css排版問題需要求助

HTML如下：

      <div id="button_bar">
                <a href="#"><span class="main_up_button">選項0001</span></a>
                <a href="#"><span class="main_up_button">選項0002</span></a>
                <a href="#"><span class="main_up_button">選項0003</span></a>
                <a href="#"><span class="main_up_button">選項0004</span></a>
                <a href="#"><span class="main_up_button">選項0005</span></a>
                <a href="#"><span class="main_up_button">選項0006</span></a>
                <a href="#"><span class="main_up_button">選項0007</span></a>
      </div>


CSS如下：

#button_bar{
        width: 800px;
        position: relative;
        height: 20px;
        margin: 0px 0px;
        text-align: center;
        padding-right: 0px;
        padding-left: 0px;
        background: #666666;
        background-repeat: repeat-x;
}


.main_up_button{
        cursor: pointer;
        height: 20px;
        width: 80px;
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 1px;
        border-color: #605758;
        border-width: 0px 0px 0px 0px;
        border-style: solid;
        color: #000000;
        font-size: 10pt;
        font-weight: bold;
        padding-top: 5px;
        padding-right: 0px;
        padding-left: 0px;
        text-align: center;
        background: #0000FF;
}


margin都已經設成0了

padding也設成0了

但是顯示出來後在兩個選項間卻仍然會有大概數個pixel的縫隙

不知道為什麼這個bug就是無法排除

比較神奇的是如果把span裡面的「選項000x」文字去掉的話

那些span間的縫隙就不見了

另外把這些選項的置中改成置左置右的話，縫隙也會不見

想請問一下造成這個bug的原因是什麼呢?

我該怎麼修改StyleSheet來排除呢?

感謝各位

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 210.241.92.249
※ 編輯: hcl012          來自: 210.241.92.249       (12/31 14:57)
推 superpai:你文字有換行 就相當有一個空白呀
感謝

原來只要將所有span標籤打在原始碼的同一行就可以了

可是在HTML原始碼裡面空白字元不是要用&nbsp;才行嗎?

又為什麼把text-align改成right或left的話就不會顯示空白呢?
※ 編輯: hcl012          來自: 210.241.92.249       (12/31 15:38)
推 superpai:連續兩個以上空白才要用&nbsp
推 superpai:另外改text-align就沒有空白可能是你用比較奇怪的瀏覽器
→ hcl012:感謝解答...
推 evenwu:沒有display block也是個問題