Размеры анкера (<a>) только с пролетами внутри блока

Question

Может ли кто-нибудь объяснить мне, что происходит с этим небольшим фрагментом HTML?

http://jsbin.com/akome5

В большинстве современных браузеров (FF4, Chrome10, IE9, IE8, Opera 11) расположение элемента выглядит следующим образом:

Мех ?! Я не понимаю почему ?! Почему высота и ширина не такие большие, как у видимой рамки (оранжевое + красное пространство)?

Добавление «display: inline-block;» к элементу не кажется, это действительно исправить. Как я могу это исправить?

Thx !!

Answer 1

• Установка ширины и высоты тега A

Answer 2

Попробуйте добавить следующие стили.

a.button {
    display: block;
    float: left;
    overflow: auto;
}
a.button span {
    display: block;
    float: left;
}

Answer 3

Для информации, мне удается сделать это без плавающей запятой: слева, вот весь CSS:

a.button{
    display: inline-block; /* <- added */
    text-decoration: none;
}

a.button span{
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 30px;
    line-height: 30px; /* <- added */
    text-decoration: none;
}

a.button .left, a.button .right{
    background-color: orange;
    width: 10px;
}

a.button .text{
    background-color: red;
    color: white;
}

Ключ line-height был ключом.

Answer 4

Я бы предложил другой подход, не включающий интервалы

html:

<a class="button2" href="#">Text Text Text</a>

css:

/* Button 2 */
.button2 {
    background-color:red;
    border:solid 10px orange;
    border-top:0;
    border-bottom:0;
    display:inline-block;
    color:#fff;
    font-family: Arial,Helvetica,sans-serif;
    font-size:11px;
    font-weight:bold;
    line-height:30px;
    text-decoration:none;
    padding:0 3px;
}

старый (вверху) новый (внизу)

http://jsfiddle.net/pxfunc/vr7gJ/