Из чего состоит ширина input и textarea?

Question

[Игорь Аверин]

Ширина формы и её элементов указана явно 400px, но input и textarea благополучно выходят за пределы.
Стили:

#cb {
      background-color: #f0f0f0;
      width: 400px;
      padding: 15px;
      box-shadow: inset 0 0 0 15px black;
    }
    #cb * {
      width: 400px;
    }

Answer 1

[dom1n1k]

google "box-sizing"

Comments

[Игорь Аверин]

Спасибо, это действительно решение самой проблемы. Но хотелось бы всё таки понимать, что это за отступы. Могу предполагать только, что элементы ввода создают в себе "невидимый" блок, и это его отступы, плюс в textarea значок в правом нижнем углу (поэтому этот элемент ещё шире в некоторых браузерах).

[v3shin]

Игорь Аверин, в Хроме во вкладке стилей - Computed - можно посмотреть применяемые стили. Скорее всего, там будут прописаны border/outline и padding.

[Сергей delphinpro]

Игорь Аверин, Какие невидимые элементы? Самый обычный padding и border, заданные браузером по умолчанию.