목록border-box (1)

열정 실천

[CSS 007] Box-sizing - 박스에 적용된 사이즈의 기준 정하기

Box-sizing box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. content-box box-sizing: content-box; width: 100px; padding: 10px; ✔ 요소 사이즈에 패딩과 테두리 포함x ✔ 콘텐츠만 100px로 최종 너비는 120px(100px+10px+10px)이 된다. ❗❗ 생각했던 요소의 크기 + ( ) border-box box-sizing: border-box; width: 100px; padding: 10px; ✔ 요소 사이즈에 패딩과 테두리 포함o ✔ 테두리와 패딩까지 합해서 최종 너비 100px 기본값은 내용이 차지하는 영역에만 사이즈가 적용되는 content-box로 생각했던 크기보다 최종 크기가 커지게 하지 않기..
개발 공부/CSS 2023. 3. 23. 21:48
이전 Prev 1 Next 다음