-
box-sizing 박스 크기 속성Coding 2022. 5. 31. 15:04
box-sizing은 박스의 크기를 어떤 기준으로 계산할지를 정하는 속성이다.
기본값 : content-box
상속 : No
애니메이션 : NO
버전 : CSS Level 3
문법
box-sizing: content-box | border-box | initial | inherit
content-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>
'Coding' 카테고리의 다른 글
npm install 이란 (0) 2022.06.03 Sass(SCSS) 개념 (0) 2022.06.03 깃허브 사이트 생성하기전 해야하는 것 (Jekyll과 Git 설치) (0) 2022.06.01 마크다운 markdown 작성 (0) 2022.06.01 자바스크립트 var, let, const의 차이 (0) 2022.05.30 CSS 속성 position (0) 2022.05.29 블로그 웹페이지에 F12 컨트롤 하기 (0) 2022.05.29 DCOTYPE와 HTML5에 대해서 (0) 2022.05.29