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