Почему div и кнопка с одинаковыми стилями отображаются в разных размерах?

s на s, их размер меняется. (Я задаю им фиксированную ширину и высоту, но кнопка отображается с другой шириной и высотой, чем div.)

Вот jsfiddle, который воспроизводит проблему: http: // jsfiddle.net / AjmGY /

Вот мой CSS:

.styled {
    border: 4px solid black;
    background: blue;
    width: 100px;
    height: 100px;
}

И мой HTML:

Я ожидал увидеть два блока одинакового размера, но нижнее окно ( ) заметно меньше. Такое поведение одинаково во всех браузерах, в которых я его пробовал, как в Windows (Chrome, FireFox, IE, Opera), так и в Android (встроенный браузер и Dolphin).

Я попытался добавить к стилю display: block; , думая, что это может заставить их обоих рендерить по одним и тем же правилам (то есть сделать кнопку рендерингом как ] div , так как теперь это блочный элемент), но это не повлияло - кнопка осталась меньше.

По мере увеличения ширины границы неравенство увеличивается. Похоже, что граница кнопки находится внутри ее ширины , а не выше и выше ее ширины , как в случае . Насколько я понимаю, это нарушает модель блока , хотя W3C действительно говорит:

пользовательские агенты могут отображать границы для определенных элементов пользовательского интерфейса (например, кнопок, меню и т. Д.) Иначе, чем для «обычных» элементов .

Является ли нормальным / задокументированным / ожидаемым поведением кнопки граница внутри ее ширины и высоты, а не снаружи? Могу ли я полагаться на такое поведение?

(Моя страница использует тип документа HTML5, если это уместно.)