CSS3 - 박스 속성

속성	설명
width	너비
height	높이
margin	외부여백
padding	내부여백

박스 속성은 웹 페이지의 레이아웃을 구성할 때 사용한다.

Content의 너비와 높이는 width와 height를 뜻하는 것이고, margin과 padding은 위의 그림과 같은 위치에 있다.

width, height, margin, padding 속성.html

0.00MB

box-sizing 속성은 위에서 배운 width와 height 속성이 차지하는 범위를 지정할 수 있다.

box-sizing 속성.html

0.00MB

content-box 키워드는 기본적으로 적용이 되는 키워드이고 width와 height 속성이 글자가 들어가는 컨텐츠 영역의 크기를 지정하게 된다. 이때 적용되는 공식은 아래와 같다.

박스 너비 = width 속성 + 2 * (margin 속성 + border 속성 + padding 속성) 박스 높이 = height 속성 + 2 * (margin 속성 + border 속성 + padding 속성)

border-box 키워드는 width와 height 속성이 테두리를 포함한 영역의 크기를 지정하게 만든다. 이때 적용되는 공식은 아래와 같다.

박스 너비 = width 속성 + 2 * margin 속성 박스 높이 = height 속성 + 2 * margin 속성