CODEWITHSUNDEEP
javascripthtmlcss
Drizzle Cloudy
Drizzle Cloudy

Reputation: 55

Why are button, input vs div, a have different width result?

Here is the js bin http://jsbin.com/ojiJEKa/1/edit

Sorry for my stupid question, but, why <div> & <a> have different width result with <input> & <button>? Even they have same style

How to make them equal?

Upvotes: 3

Views: 872

Answers (2)

chunterg
chunterg

Reputation: 138

input and button have different box model, you can add "box-sizing:content-box" to them to reset the box model.

Upvotes: 1

Simon Boudrias
Simon Boudrias

Reputation: 44669

The button and input element have a box-sizing set to border-box by default. This mean the padding and border are bounded inside the defined width.

That is not the base with the a and div elements, has they have normal box-sizing property. This mean padding and border are added extra on top of the width.

To make them all the same, normalize the box-sizing css property.

Upvotes: 7

Related Questions