CODEWITHSUNDEEP
csshtmlbutton
jane
jane

Reputation: 385

Styled elements 'input[type="submit"]' and 'button' have different widths than other elements

It's easy to workaround by giving the widths different numerical values (and thus an equal visible width) but this just bugs me a lot.

Here's the code:

<!DOCTYPE html>
<style>
.box {
    width: 6em;
    margin: 1em auto;
    padding: 1em;
    font-family:sans-serif;
    font-size: 1em;
    font-weight: bold;
    border: none;
    display: block;
    text-decoration:inherit;
    text-align:center;
    color:inherit;
    background-color:blue;
}
</style>
<html>
<body>
<a class="box">Anchor</a>
<input type="submit" class="box" value="Input" />
<button type="submit" class="box">Button</button>
</body>
</html>

and a jsfiddle: http://jsfiddle.net/TRmtp/

Upvotes: 2

Views: 237

Answers (1)

David Thomas
David Thomas

Reputation: 253318

You can have the same width, by adding the rule:

box-sizing: border-box;

Updated JS Fiddle demo.

The problem is the way the browsers assign widths, specifically whether the width includes the padding, and border, widths. Using box-sizing: border-box forces the (compliant) browsers to include those widths within the overall assigned width, regardless of the 'default' model.

References:

Upvotes: 3

Related Questions