ширина: 100% -пополнение?

Question

У меня есть html-ввод.

На входе есть padding: 5px 10px; Я хочу, чтобы он составлял 100% от ширины родительского div (который является текучим).

Однако с использованием width: 100%;вызывает ввод 100% + 20px как я могу обойти это?

Пример

Answer 1

Попробуйте это:

width: 100%;
box-sizing: border-box;

Answer 2

У меня была такая же проблема. Исправьте это так:

width: 100%;
padding: 5px;
/*--------------Now remove from padding what you've added---------------*/
margin:-5px;

Приветствия

Answer 3

А как насчет упаковки в контейнер? Контейнер должен иметь стиль как:

{
    width:100%;
    border: 10px solid transparent;
}

Answer 4

Вы можете сделать это:

width: auto;
padding: 20px;