CODEWITHSUNDEEP
htmlcss
Razor Storm
Razor Storm

Reputation: 12326

How come padding is not calculated into the width for submit buttons?

First of all, I think it is absolutely ridiculous that padding is considered part of the width of a DOM element.

However, I eventually gritted my teeth and accepted this fact... only to find out that for submit buttons the paddings are NOT calculated as part of the width.

http://jsfiddle.net/CPRyb/2/

How would I go about fixing this?

Upvotes: 1

Views: 216

Answers (3)

Rodrigo
Rodrigo

Reputation: 704

Styling input tag is a nightmare, they behaves weirdly across browsers, so there is no easy solution if you try this way.

One workaround is to wrap inputs in a div tag and stylize it. My cross-browser solution:

http://jsfiddle.net/hRCNS/1/

html:

<div class="main">
<div class="text">
    <input type="text" />
</div>
<div class="button">
    <input type="submit" />
</div>
</div>

css:

div.main
{
     width: 300px;   
     text-align: center;
}
input
{
    width: 100%;
    border:0;
    padding:0;
    margin:0;
    background: transparent;
}
.text {
    border:solid 1px #bbb;
    padding: 10px;
}

.button {
    margin:1px;
    border:solid 1px #bbb;
    background: #ddd;
    border-radius: 4px;
}
.button input {
    padding:4px;
    cursor:pointer;
}

.button:hover {
    background:#ccc;
}
.button:active {
    background:#999;   
}

doing this way you also workaround that width calculation crap and can customize the looks nicely. ;)

Upvotes: 1

Michal
Michal

Reputation: 3642

change css

.button {
display: block;
padding: 10px;
}

and don't use ending tag for input

Upvotes: 0

user1000131
user1000131

Reputation:

I'm not sure if you just misspoke, but the padding is not considered part of the width by default. That is to say, if an element has a width of 100px, padding of 10px, and border of 5px, then it will be rendered over 100+(10*2)+(5*2)=130px. However, the element will only contain 100px of space, which is the amount set in width.

That being said, you can change the default behavior with the box-sizing property. Just set it to border-box to subtract the padding (and border) from the box's width, or content-box to render the padding outside of the specified width. Here's a demo.

For increased compatibility you should also include the vendor prefixes. So,

input[type=button] {
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
}

Upvotes: 4

Related Questions