-
box-sizing 박스 크기 속성Coding 2022. 5. 31. 15:04
box-sizing은 박스의 크기를 어떤 기준으로 계산할지를 정하는 속성이다.
기본값 : content-box
상속 : No
애니메이션 : NO
버전 : CSS Level 3
문법
box-sizing: content-box | border-box | initial | inheritcontent-box 콘텐트 영역을 기준으로 크기를 정한다.
border-box 테두리를 기준으로 크기를 정한다.
initial 기본값으로 설정한다.
inherit 부모 요소의 속성값을 상속받는다.
예제
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { margin: 0px; } div { margin: 20px; padding: 20px; border: 20px solid #dddddd; width: 500px; } .cb { box-sizing: content-box; } .bb { box-sizing: border-box; } </style> </head> <body> <div class="cb"> <p>content-box</p> </div> <div class="bb"> <p>border-box</p> </div> </body> </html>
예제 모습