[이슈] padding 적용 시 부모 요소 벗어나는 이슈 해결

input {
        box-sizing: border-box;
        border: 1px solid rgb(212, 212, 212);
        border-radius: 2px;
        display: block;
        width: 100%;
        height: 48px;
        padding: 0px 14px;
        font-size: 14px;
        font-weight: 500;
        color: rgb(26, 26, 26);
        outline: none;
    }

input 박스에서, padding 적용 시

부모 요소에서, padding 크기만큼 벗어나는 이슈가 있다.

이럴 땐,

    box-sizing: border-box;

이 속성을 추가하면

의도한 대로, padding 값이 적용되며 부모 요소 안으로 들어오게 된다.