Div可能由於填充不正確的大小

Question

我有兩個div應該顯示相同，但​​不要。如果我遵循第一種方式的語法，div有正確的寬度（60px），但如果我這樣做，第二種方式只有44px。我需要用第二種方法。爲什麼尺寸有差異？

編輯：我也注意到，如果我使用第二種方式，在字母前後似乎沒有間距。也許是與填充..

第一種方式

<div id="item_2", onclick="location.href='http://www.facebook.com';" style="cursor:pointer;"> About </div> 

方式二

<%= link_to "http://www.facebook.com", id:"item_2" do %> About <% end %> 

CSS

#item_2 { 
    width: 60px; 
    padding-top: 11px; 
    padding-bottom: 11px; 
    text-decoration: none; 
} 

Answer 1

作爲第二個例子是<a>而不是<div>你應該將其設置爲「display: block;」

檢查這個例子： http://jsfiddle.net/hige/7puyk/

Answer 2

在第一種方式：您正在使用div標籤是塊級元素。

第二種方式：您正在使用（錨定）標記，即內聯元素。

注：行內元素寬度其內容自動調整，而不是通過CSS 如果你想實現CSS寬度，然後讓它塊級或設置浮球液位

對於第一種方式CSS製作DIV標籤內嵌

#item_2 { 
    display:inline; 
    padding-top: 11px; 
    padding-bottom: 11px; 
    text-decoration: none; 
} 

================================

OR

對於第二種方式CSS做一個nchor標籤座

#item_2 { 
     display:block; 
     width:60px; 
     padding-top: 11px; 
     padding-bottom: 11px; 
     text-decoration: none; 
    } 

UPDATE： 你應該使用Seprately CSS的定位標記

方法1：Globaly爲錨標籤

a { 
     display:block; 
     width:60px; 
     padding-top: 11px; 
     padding-bottom: 11px; 
     text-decoration: none; 
    } 

路2

a#item_2 { 
     display:block; 
     width:60px; 
     padding-top: 11px; 
     padding-bottom: 11px; 
     text-decoration: none; 
    } 

方式3 給錨標籤Seprate ID或 類爲例

<a class='item_n' >Link</a> 

CSS

.item_n { 

      display:block; 
      width:60px; 
      padding-top: 11px; 
      padding-bottom: 11px; 
      text-decoration: none; 
}