Почему в input padding выходит за margin?

Question

[Aspirant555]

Что-то снова работает криво. Хочу просто вписать input в div, но box-sizing не работает, хотя в других блоках всё отлично работает, проблема только с input.

margin: 0.5rem;
    width: 100%;
    display: block;
    box-sizing: border-box;
    /* opacity: inherit; */
    /* overflow: hidden; */
}
.header__autorization__modal__window input {
    padding: 0.5rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    border: none;
}
.card_number {
    -webkit-appearance: none;
    margin: 0;
}
blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
    padding: 0;
    margin: 0;
}
таблица стилей агента пользователя
input:not([type="image" i]) {
    box-sizing: border-box;
}
таблица стилей агента пользователя
input[type="tel" i] {
    padding: 1px 2px;
}
таблица стилей агента пользователя
input {
    writing-mode: horizontal-tb !important;
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: ;
    text-rendering: auto;
    color: fieldtext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    cursor: text;
    background-color: field;
    margin: 0em;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
}

https://codepen.io/papagis/pen/dyKGXKv

Comments

[ProjectSoft]

aspirantes сделайте пример в песочнице, например в codepen.io

[Aspirant555]

ProjectSoft, https://codepen.io/papagis/pen/dyKGXKv

[ProjectSoft]

aspirantes,
Для input добавьте
max-width: calc(100% - 1rem);
Т. е. рассчитываем максимальную ширину инпута 100% минус margin слева и справа.

[Aspirant555]

ProjectSoft, Ну исправить то можно, меня просто интересует сам баг, паддинг инпута выходит из марджина - это как вообще?

[ProjectSoft]

aspirantes, паддинг не выходит из маргин. Этого вообще не может быть))
Вам нужно просто понять, что такое margin и что такое padding. Что они делают и вчём разница.
В вашем случае margin схлопывается справа.

[Aspirant555]

ProjectSoft, на скриншоте гляньте, оранжевым отмечены внешние отступы, зелёным внутренние... Поэтому и говорю что это баг... Margin автоматически подгоняется под размер блока, а input с padding игнорируются, в связи с чем они выходят из зоны margin. И такого даже с overflow не добиться.

[ProjectSoft]

aspirantes, я всё прекрасно вижу.
Это не баг, это инпут себя так ведёт.
Здесь много чего можно рассказать... Просто помните, что инпут ведёт себя ни как блок, даже если вы явно указываете ему им быть.

[Aspirant555]

ProjectSoft, ну так прикол в том, что margin инпута ведёт себя нормально... Судя по всему недоработка... просто на каком уровне, и возможно ли как-то всё таки сделать это нормальным? С box-sizing всё таки красивее чем с calc().

[Виталий Першин]

aspirantes, Если принципиально важно растянуть инпут с учетом margin то display: grid; на обертку можно повесить

[Ankhena]

И инпута есть ширина по умолчанию. А не auto, как обычно.
Соответственно, если вы зададите max-width: 100% это не поможет, потому что это даст ширину родителя.

А значит, нужно действовать по-другому, например, либо использовать calc либо задать padding родителю вместо margin инпуту.

[Aspirant555]

Ankhena, ну, в том то и прикол, что margin инпута как видно по картинке вписался в блок, а сам элемент игнорирует - это и странно. Видимо прямого решения этой проблемы нет...

[Ankhena]

aspirantes, никуда он не вписался. Инспектор просто не знает куда вам его нарисовать, чтобы было понятно.

Видимо прямого решения этой проблемы нет...

Вроде выше есть целых два достаточно прямых решения.

[Aspirant555]

Ankhena, да, в целом вопрос решён, +третье решение: я просто margin убрал, но... забавно, что из элемента только внешние отступы подгоняются по размеру родителя.