CSS 박스 모델

박스 모델 구성

콘텐츠 : HTML 태그의 텍스트, 이미지가 출력되는 부분

패딩 (padding) : 콘텐츠를 직접 둘러싸고 있는 내부 여백

테두리 (border) : 패딩 외부의 테두리로서, 직선이나 점선 혹은 이미지로 테두리를 그릴 수 있음

여백 (margin) : 박스의 맨 바깥 영역이며 테두리 바깥의 공간으로 인접한 아래, 위 이웃 태그의 박스와의 거리

 

 

박스 모델을 구성하는 CSS Property

	콘텐츠	패딩	테두리	여백
크기 관련	width  height	padding-top padding-right padding-bottom padding-left	border-top-width border-right-width border-bottom-width border-left-width	margin-top margin-right margin-bottom margin-left
크기 관련 단축	-	padding	border-width	margin
스타일 관련		-	border-top-style border-right-style border-bottom-style border-left-style	-
스타일 관련 단축			border-style
색상 관련		패딩의 색은 따로 없음 태그의 배경색으로 칠해짐	border-top-color border-right-color border-bottom-color border-left-color	여백은 투명, 부모 태그의 배경이 비춰보임
색상 관련 단축		-	border-color	-
전체 단축			border