Box(박스모델)

   

   

박스 모델의 규격

엘리먼트를 문서에 배치하기 위해서는 margin, padding 그리고 border 속성으로 구성된 Box Model을 알고 있어야 합니다.

   

   

구성

   

구분	설명
여백 (margin)	부모 항목과 경계 사이의 간격 바깥쪽 여백 항상 투명한 배경
경계 (border)	블록의 외곽 경계선 테두리 두께 요소의 border프로퍼티로 배경 지정
채워넣기 (padding)	경계선와 내용(content) 사이의 간격 안쪽 여백 요소의 background프로퍼티로 배경지정
내용 (content)	HTML 문서의 실제 내용 요소의 background프로퍼티로 배경지정

   

   

   

   

박스 모델 관련 프로퍼티

속성	속성값	의미
width	숫자 또는 백분율	너비, 높이
height	숫자 또는 백분율	너비, 높이
float	left, right, none	위치
margin, margin-top, margin-bottom, margin-left, margin-right	숫자 또는 백분율	여백
padding, padding-top padding-bottom, padding-left, padding-right	숫자 또는 백분율	채워넣기
border, border-top, border-bottom, border-left, border-right	숫자 또는 백분율	경계