css 박스모델1 - margin, padding, border, content

css 박스 모델(Box-Model) 1 - margin, padding, border, content

박스(Box)란: 요소가 차지하고 있는 사각형의 영역

브라우저가 요소를 렌더링하는 시점에 각각의 요소들은 각각 사각형 형태의 영역을 차지하고 있다. 박스는  4개의 영역으로 구성되는데, margin, padding, border, content이다. css는 이 박스들의 크기, 위치, 속성들에 대해 스타일을 정의할 수 있다.

(그림 1) css 박스모델 - margin, padding, border, content

• 위 그림에서 바깥쪽 여백이  margin이고,
• 안쪽 여백이 padding이다.
• 테두리는 border 속성을 가짐으로써 두께, 모양, 색깔 등을 정의할 수 있다.
• 콘텐츠나 언제나 테두리(border)로 감싸져 있다. 콘텐츠 영역(span은 제외)은 width, height(너비, 높이)를 가진다.

1. border : 테두리

아래 코드처럼 border 속성에 대해 속성값을 정의할 수 있다.
아래 (그림 2)의 속성값: 보더 두께, 모양, 색깔

(그림 2) border 속성에 대해 속성값

구글 크롬 개발자 도구로 출력해 보면 위 코드는 아래처럼 출력된다.
위에서 정의한 대로 3px, solid, red의 border 속성이 출력되고 border 속의 콘텐츠 영역도 표시된다.

 

(그림 3) 구글 크롬 개발자 도구 출력 내용

2. padding : 안쪽 여백

위 상자 모델에서 padding 20px을 부여하면 다음과 같다.

(그림 4) padding 20px을 부여

구글 크롬 개발자 도구로 보면 아래 그림처럼 padding 20px가 보더와 컨텐트 사이에 보인다. 패딩 부분(색깔:연두색)의 두께가 보인다.

(그림 5) 구글 크롬 개발자 도구에서 패딩 출력 내용

3. margin: 바깥쪽 여백

위 상자 모델에서 margin 20px을 부여하면 다음과 같다.

(그림 6)박스 모델에서 margin 20px

아래 그림처럼 margin 20px가 보더와 바깥쪽에 보인다. 마진 부분(색깔: 황토색)의 두께가 보인다.

(그림 7) 구글 크롬 개발자 도구에서 마진 출력 내용

4. 콘텐츠 영역

콘텐츠 영역은 두 가지 값을 가지고서 크기를 조절한다.

1. width
2. height

(그림 8) 콘텐츠 너비와 높이

5. div와 span의 차이

위 4의 경우는 div이므로 width와 height 속성을 줄 수 있다. 그러나 span일 경우 불가능하다. 그것은 span과 div는 결정적인 차이이고 근본적인 차이다.

인라인 요소에는 width와 height 속성이 지정되지 않는다. 인라인 요소는, 패딩, 보더, 마진 모두 가질 수 있지만, width와 height는 가질 수 없다.
다만 한 가지 방법이 있는데 그것은 display속성을 부여하고, display: inline-block;로 바꾸는 방법이 있다.

(그림 9) span에 너비와 높이를 주는 방법

span 요소(인라인 요소)에 display: inline-block;으로 너비와 높이를 준 결과는 다음처럼 출력된다.

(그림 9) span에 너비와 높이를 준 결과

6. 다음 글

• 다음 글: 박스 모델 2 margin, padding 하위 속성
• 그다음 글: 박스 모델 3 box-sizing
• 그다음 글: 박스 모델 4 background 속성 및 background 하위 속성