박스모델 > HTML/CSS

박스모델
HTML의 엘리먼트들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는데 이것을 가르켜 박스모델이라고 하고, 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다.

margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
border : 박스의 테두리
padding : 테두리와 content간의 간격
content : 엘리먼트 안에 포함되는 컨텐츠


margin:10px - 상우하좌의 margin값이 10px
 margin:10px 20px - 상하 10px, 좌우 20px,
 margin:10px 20px 30px - 상 10px, 좌우 20px, 하 30px
 margin:10px 20px 30px 40px - 상우하좌의 순으로 값이 지정됨