Comments on: Button Height and a Broken Box Model

By: Satya Prakash

Satya Prakash — Wed, 28 Sep 2011 08:57:02 +0000

Box-sizing discussion has saved me. On page my input box was having different height than other. and I was surprised.

By: Avangelist

Avangelist — Wed, 10 Mar 2010 19:28:10 +0000

I don’t think any of these responses are right.

If we are talking about a button element – i.e , this is an inline element as correctly stated by Justin. An inline element cannot work with the ‘box model’ by definition.

If we are talking about taking a semantic approach, like a horizontal menu where the markup is made out of an ordered/unordered list where the list is set to display inline, then we already have a clear problem.
The list is set to inline. You can set the list items to display:block, but of course now the list is no longer displaying on a single horizontal line. TO complete this task you have to float the list elements.

Note however, that this is only required for the list items, or buttons to be styled as desired, borders, padding, line-height and so on in IE7 ONLY.

inline-block is not supported cross browser, and quite often will cause you more problems and even more markup. I think it is also uncertain whether it is going to be re-emerge into the CSS3 model.

gwi suggests using box-sizing. I am sure that gwi is aware but hasn’t perhaps explained perfectly, that what they are describing is a style with a vendor prefix. This means that it is a style that is not globally accepted or in a final document from W3C.

In this example box-size is a CSS3 style which is not currently supported, and is not intended for this sort of example. Not to say that it couldn’t be used in this way, I just wouldn’t.

I don’t actually think that the issue presented relates in any way to browser mechanics. Bottom line is you are looking at an inline level element not a block level element.

It’s all to do with the fact that you are trying to set a height. Don’t, just use padding to attain your height, because what you are not factoring is the line height of the element content.

By: gwi

gwi — Mon, 08 Mar 2010 17:30:42 +0000

“Inspect element” in Safari says it uses the browser default “-webkit-box-sizing: border-box;” for input[type="submit"], button and others. So you can reset this behaviour with

.button { box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; display: block; }

e.g. if you want “input type=’submit’ class=’button’” and “a class=’button’” to appear identically. This does not answer the quetsion “why” but it works around this issue.

By: Nathaniel

Nathaniel — Sun, 07 Mar 2010 03:57:12 +0000

From the time I started web design I felt padding functioned completely counterintuitive. It is ridiculous that padding gives additional height and width to the element. If the element’s width is 50px it should stay 50px. Padding shouldn’t change that. Padding should be added inside the element.

But unfortunately it’s a standard. Perhaps there is some rational I don’t know.

By: Pepa Baros

Pepa Baros — Fri, 05 Mar 2010 08:08:48 +0000

The same problem is also when select form element is used. Following page Form elements and box model describes that. Live example and screenshots included.

By: Norman

Norman — Fri, 05 Mar 2010 01:11:58 +0000

instead of display:block, try display:inline-block
that way the buttons will stay in line but you can set height and padding as you wish

By: Ben

Ben — Thu, 04 Mar 2010 08:13:09 +0000

input[type="submit"] uses the traditional box model (box-sizing: border-box). You can force it to use the W3C model using the CSS3 declaration:

box-sizing: content-box

In Mozilla, you can use:

-moz-box-sizing: content-box.

By: Ben

Ben — Thu, 04 Mar 2010 08:13:09 +0000

input[type="submit"] uses the traditional box model (box-sizing: border-box). You can force it to use the W3C model using the CSS3 declaration:

box-sizing: content-box

In Mozilla, you can use:

-moz-box-sizing: content-box.

By: Top Wordpress Themes

Top Wordpress Themes — Wed, 03 Mar 2010 21:54:14 +0000

I was also thinking…browsers are a funny thing. Have you already reset all browser margins and padding’s as follows:

*{
margin: 0px;
padding 0px;
}

By: Mark @ Alchemy United

Mark @ Alchemy United — Wed, 03 Mar 2010 18:17:58 +0000

“The box model states that the resulting box will take up 30px of vertical space for the div’s contents, plus an additional 10px on the top and bottom for the padding, for a total of 50px vertical space taken up by our div. ”

Hummm… My understanding is padding goes to the inside. To get 50px total you’d have to be setting the margin, not the padding, no? Margin is the space between. Padding is the space inside. Or at least that’s what I thought.