CSS box-sizing

Creator

Creator

Seonglae Cho

Created

Created

2021 Apr 5 11:53

Editor

Editor

Seonglae Cho

Edited

Edited

2023 Feb 21 17:15

Refs

Refs

content-box - padding border margin 포함 안하는 default

border-box - padding border margin 포함

CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다. CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다. box-sizing 속성을 사용해 이 방식을 바꿀 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

Recommendations

//////////