Textarea и input имеют разную ширину

Question

Textarea и input имеют разную ширину

CSS:

textarea, input {

  width:300px;

}

HTML:

<textarea id="input"></textarea>

<br>

<input type="submit">

Live Demo: http://codepen.io/qaz/pen/teaiG

Почему входные и текстовые области отображаются с разной шириной? Какие свойства мне нужно добавить, чтобы сделать их одинаковой ширины?

Обновление:
Установив границы и отступы в 0px, я могу сделать их отображение одинаковой ширины. Никто не хочет набивки: 0px, хотя, как ни странно, когда набивка составляет, скажем, 10px для обоих, они больше не одинаковы по ширине. Теперь, когда я нашел ... решение с заполнением: 0px, я все еще заинтересован в объяснении и решении, которое позволяет мне все еще иметь заполнение.

(я использую Chrome 35 на Windows 7.)

689 2

css forms cross-browser

2 ответов:

Comments

Ничего не найдено.

Nicholas Hazel · Accepted Answer · 2014-07-03 21:43:38

Попробуйте установить его следующим образом:
textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Http://jsfiddle.net/QV9PE/

Свойство box-sizing CSS3 может сделать именно это. Значение border-box (в отличие от значения content-box по умолчанию) делает конечную отрисованную рамку объявленной шириной, а любые границы и отступы вырезаются внутри рамки.

Теперь мы можем смело объявить нашу текстовую область шириной 300 пикселей, включая пиксельное заполнение и границу, и идеально выполнить макет.

Mark Silverberg · Accepted Answer · 2014-07-03 21:43:13

Попробуйте использовать следующие CSS и HTML. Я не знаю теоретического ответа, но вот практическое решение: http://codepen.io/anon/pen/BGeci

CSS:
textarea, input {
  width:300px;
}

input[type=submit] {
  width:306px;
}
HTML:
 <textarea id="input"></textarea><br>
 <input type="text" id="input2"></textarea><br>
 <input type="submit">