Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why do a div and a button with the same styles render at different sizes?

I have a page with some clickable <div> elements, and I want to change them to <button>s instead to make it easier to identify them via jQuery. But when I change the <div>s to <button>s, their size changes. (I'm styling them as fixed width and height, but the button renders at a different width and height than the div does.)

Here's a jsfiddle that reproduces the problem: http://jsfiddle.net/AjmGY/

Here's my CSS:

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

And my HTML:

<div class="styled"></div>
<button class="styled"></button>

I would expect to see two boxes of identical size, but the bottom box (the <button>) is noticeably smaller. This behavior is consistent across all the browsers I tried it on, both Windows (Chrome, FireFox, IE, Opera) and Android (built-in browser and Dolphin).

I tried adding display: block; to the style, thinking that that might make them both render using the same rules (i.e., make the button render like a div since it's a block element now), but that had no effect -- the button remained smaller.

As I increase the border width, the disparity increases. It looks as though the button's border is inside its width, rather than above and beyond its width as with the <div>. As far as I understand it, this violates the box model, though the W3C does say:

user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements.

Is it normal / documented / expected behavior for a button to have its border on the inside of its width and height, rather than outside? Can I rely on this behavior?

(My page uses an HTML5 doctype, if that's relevant.)

like image 852
Joe White Avatar asked Dec 06 '11 04:12

Joe White


People also ask

Should I use a button or a div?

You should use <a> or <button> , not <div> . an anchor with an href attribute will trigger page reload. Without an href, it is not "tabable", and it still does not carry the button semantic.

How do I make a div take up the whole width?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.

Can a div act as a button?

role=“button”ARIA (Accessible Rich Internet Applications) attributes provide the means to make a div appear as a button to a screen reader. Here is the intro to the button role page on MDN: Adding role=“button” will make an element appear as a button control to a screen reader.


1 Answers

Buttons and other input controls are rendered using the border-box model by default; i.e. content, padding and border all add up to the total width that you declare. They also often have some padding added by browsers arbitrarily according to their default stylesheets. As you quote, this is acceptable behavior and not a violation of standards; it's simply to accommodate rendering of OS-level GUI controls.

To get your button to be the same size as your div, size it according to the content-box model (which is "the" original W3C box model) and zero out its padding:

button.styled {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0;
}

jsFiddle demo

like image 76
BoltClock Avatar answered Nov 13 '22 05:11

BoltClock