[html, css 응용] 3. css 박스 모델

html 요소는 모두 박스모양으로 이루어져 있다. 개발자 도구 (F12)를 통해 들어가보면 

 

다음과 같이 그림 형태로 나타난다.

 

margin : 공간에 대한 의미로 content의 바깥 공간에 대한 정의이다.

padding : content의 내부 공간으로 실제 몸집이 커진다.

border : content의 테두리이다.

 

# padding과 margin

옵션을 1개 주면 4방향 모두 해당 px로 지정되고

옵션을 2개 주면 아래-위, 양옆 세트로 지정되고

옵션을 4개주면 위쪽부터 시계방향으로 px조정이 가능하다.