CSS - 박스 모델

margin영역 : 박스모델에서 가장 외곽에 있음, html요소의 외부 여백 담당

margin: 20px; → 상하좌우 다 적용

margin: 10px 20px; → 상하 10px, 좌우 20px

margin영역 세분화 지정 가능 (상하좌우 특정 방향에만 값 적용 가능)

(margin-left, margin-right, margin-top, margin-bottom)

 

※ margin 겹침 현상 주의

→겹쳤을 때 더 큰 쪽의 값으로 적용됨 (합산이 아님)

※ inline 요소에서는 margin영역에 top, bottom 지정 불가

 

border영역 : 테두리 영역

border: 굵기 굵기종류 굵기색깔

ex.

border: 1px solid red; (→ 단축 속성 (축약 속성) 방식)

 

border-width: 1px;

border-style: solid;

border-color: red;

 

padding영역 : 내부 여백 영역

margin 속성과 같은 방식으로 작동

(단, 겹침 현상은 없음)

 

content영역

width - 컨텐츠 영역의 가로크기 조정

height - 컨텐츠 영역의 세로크기 조정

box-sizing: border-box;로 지정 시 border-box 까지 포함된 사이즈로 width height 적용

content-box로 지정시 content-box의 사이즈를 width height 적용

 

html box 모델의 성격을 바꾸는 코드 

display: block

display: inline

display: inline-block