[HTML5&CSS] Box model

각 HTML element들은 여러 layer로 구성되는데, 가장 바깥쪽에 margin, 그 안에 외곽선인 border, 그 안에 padding 그리고 그 안에 width와 height의 content가 위치한다. 반대로 안쪽부터 보자.

 

Content Box는 실제 content가 들어가는 부분이다. 가장 중요한 property는 width와 height이다. 실제 px값이나 %로 준다.

width: 300px;

height: 200px;

 

Padding은 border와 content box 사이에 공간을 준다. top, bottom, left, right 모두에 줄 수도, 좌우와 상하에만 줄 수도, 원하는 곳에 padding-top, padding-bottom, padding-left, padding-right로 줄 수도 있다.

모두에 padding 값을 줄 때는 값 하나만 쓴다.

padding: 25px;

상하와 좌우에 같은 값들을 줄 때는 값 두개를 쓴다. 아래는 상하에 25px를, 좌우에는 0px를 준다

padding: 25px 0px;

 

border는 padding의 끝에서 margin의 시작까지 자리한다. 기본값은 visible하지 않아서 명시적으로 정해주어야만 볼 수 있다. padding처럼 각 direction마다 줄 수도 있다. 모든 값은 width, style, color의 3가지 값을 갖는다. 예제들은 다음과 같다.

border: 1px solid red;

border-top: 1px solid blue;

border-right: 2px dotted red;

border-bottom: 5px dashed yellow;

border-left: 10px double pink;

 

margin은 border의 끝과 페이지 상의 다른 element의 외곽 사이에 공간을 준다. 역시 padding처럼 모든 방향에, 상하/좌우를 나눠서 줄 수도, 각 direction 별 top, right, bottom, left에 따로 줄 수도 있다.

 

4 방향을 속성에 한꺼번에 써서 줄 때는 clock-wise로 돈다. top->right,->bottom->left

개발자 도구에서 각 속성 값을 확인할 수 있다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다