当前位置: 动力学知识库 > 问答 > 编程问答 >

html - 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;

}

网友答案:

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;  
网友答案:

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: