CODEWITHSUNDEEP
htmlcssgoogle-chrome
Chris_F
Chris_F

Reputation: 5557

Why are these elements not the same width?

In Google Chrome (tested with version 50) if I set the width of a <input> element and a <textarea> element both to 500px, they are clearly not the same width. I tried explicitly removing any padding and they are still clearly not the same width. This does not happen in Mozilla Firefox. See here on jsfiddle.

<input type="text"/>
<br/>
<textarea></textarea>

input, textarea {
  width: 500px;
}

Upvotes: 4

Views: 113

Answers (2)

Mohammad Kermani
Mohammad Kermani

Reputation: 5396

It is from box-sizing and you can add box-sizing: border-box; to them and they will have the same width.

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include. (The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.) W3School

Update:

And @Herry described in a comment:

In Chrome, input has 2px border on all sides, 1px top + bottom padding and no padding on left + right whereas textarea has 1px border + 2px padding on all sides. In short input has 2px outside content box area on left and right whereas textarea has 3px. So there is a difference of 2px.

See demo

Upvotes: 1

Bonsai
Bonsai

Reputation: 346

The native padding for text input elements differ.

Add this in your CSS:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;

Upvotes: 4

Related Questions