Google Chrome показывает пространство между <buttons>

Question

У меня проблема с CSS <buttons> в Google Chrome, он показывает пространство между <buttons>, но в Opera и IE все нормально, почему?

Вот полный код CSS:

button {
    border: 1px solid #bdbdbd;
    text-shadow: 0 1px 1px white;
    font: bold 11px Sans-Serif;
    padding: 6px 8px;
    white-space: nowrap;
    vertical-align: middle;
    color: #666;
    background: -webkit-linear-gradient(top, white, #E0E0E0);
    background:    -moz-linear-gradient(top, white, #E0E0E0);
    background:     -ms-linear-gradient(top, white, #E0E0E0);
    background:      -o-linear-gradient(top, white, #E0E0E0);
    cursor: pointer;
    text-decoration: none;
    margin-right: -1px;
}

Вот HTML-код:

<div><button type="button">Send</button><button type="button">Reset</button></div>

Спасибо за помощь.

Answer 1

Каждый набор кнопок содержится в div, который имеет margin-left из трех (3) пикселей.

EDIT Chrome также применяет поле по умолчанию, равное единице (1).) пиксель.Вам нужно установить поле равным нулю (0), чтобы кнопки избавились от этого интервала.

Answer 2

Кажется, что это также левое поле. Это исправляет это в Chrome (не уверен, что он будет делать в других браузерах) ... Я отредактировал свойство margin.

button {
border: 1px solid #bdbdbd;
text-shadow: 0 1px 1px white;
font: bold 11px Sans-Serif;
padding: 6px 8px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background:    -moz-linear-gradient(top, white, #E0E0E0);
background:     -ms-linear-gradient(top, white, #E0E0E0);
background:      -o-linear-gradient(top, white, #E0E0E0);
cursor: pointer;
text-decoration: none;
margin: 0 -1px 0 0;
}