输入和textarea设置为相同宽度时显示不同的宽度?

时间:2012-06-12 00:28:06

标签: html css

当我将输入和文本区域的宽度设置为94%时,它们的宽度似乎略有不同。这是我在很多网站上多次看到过的。

任何人都可以解释为什么当设置为相同的%宽度时,textarea不像输入那么宽?

input, textarea {
    width: 94%;
}

2 个答案:

答案 0 :(得分:11)

  1. 不要忘记the box model包括边框,填充和边距。它们都会影响页面中元素的实际物理宽度。
  2. 除非您使用CSS reset,否则您将受默认浏览器样式表的支配,这些样式表为每个元素设置了不同的边框,填充和边距。

答案 1 :(得分:9)

使用CSS3,您还可以使用:

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