CSS 박스 모델

1 개요

CSS Box Model

CSS padding, border, margin

CSS 박스 모델, CSS 박스 모형, CSS 상자 모형

• HTML 요소는 일종의 박스처럼 표현됨
• 하나의 HTML 요소가 가지는 직사각형 영역, 그 구성

 

2 크기 계산 예시

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

• 전체 너비 = 250 + 20(좌우padding) + 10(좌우border) + 20(좌우margin) = 300 px

3 같이 보기

• CSS box-sizing 속성
• CSS padding 속성
• CSS border 속성
• CSS margin 속성
• CSS float 속성
• CSS 주요 스타일

4 참고

• http://www.w3.org/TR/CSS21/box.html
• http://www.w3schools.com/css/css_boxmodel.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/box_model