Почему добавление иногда включается в высоту?

У меня есть текстовая область, и я добавил к ней некоторый CSS

<textarea watermark="Have a question? ..." class="test-input" rows="4" cols="15" name="">Have a question? ...</textarea>

и CSS, применяемые к нему -

.test-input {
    border: 1px solid #D0D0D0;
    border-radius: 3px 3px 3px 3px;
    color: #646464;
    float: left;
    font-family: Arial;
    font-size: 12px;
    height: 20px;
    margin: 0 0 0 15px;
    padding: 5px;
    resize: none;
    width: 264px;
}

И я получаю текстовую область с некоторым дополнением внутри нее. В тех случаях, когда он работает абсолютно нормально, высота текстовой области составляет 20 пикселей с шагом 5 пикселей, не включенным в высоту. Но в некоторых случаях высота текстовой области включает в себя отступы, а высота уменьшается до 8 пикселей. Я искал любой css, если его переопределить, но я не нашел. И я сравнил результат в обоих случаях. Слева - уменьшенная высота, а справа - ожидаемая высота.

Я могу исправить эту проблему, в других случаях, специально управляя высотой, добавляя! Важно или с помощью какого-то JavaScript. Но, мне интересно, какая причина здесь делает такой эффект. Почему и в каких случаях прокладки включаются с высотой или шириной?

Ответ 1

Это зависит от того, какой атрибут box-sizing вы использовали:

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

Установив box-sizing: border-box, как показано в левом примере, вы определили высоту элемента в 20px. Это означает, что фактическое поле содержимого будет только 8px tall, потому что браузер вычитает границу (верхняя часть 1px, нижняя часть 1px) и отступы (верхняя часть 5px, верхняя часть 5px) образуют определенную высоту, оставляя только 8px влево, что является чуть-чуть бит слишком короткий, чтобы содержать высоту всей строки (поэтому слово кажется отрезанным).

Ответ 2

В случае, если это кому-то пригодится, jQuery кажется надежным в этом:

.height() не включает отступы (даже там, где размер блока: border-box)
.outerHeight() включает в себя отступы и границу
.outerHeight(true) включает отступы и границы и поле

Каждый может установить или получить, например, $element.outerHeight(desired_height_including_margins, true);