[CSS] 박스모델 2 : margin / padding

margin은 테두리를 기준으로 안쪽에,
padding은 테두리를 기준으로 바깥쪽에 존재하는 여백을 뜻한다.

여백은 상하좌우 네 개의 면에 모두 존재하는 영역이며, 개발자는 각 면에 개별적으로 두께를 정의할 수 있다. ( top, bottom, left, right )

여러 값 한 번에 정의

margin : 10px, 20px, 30px, 40px
(각각 위, 오른쪽, 아래, 왼쪽)
margin : 10px 20px
(위,아래 : 10 오른쪽,왼쪽 : 20)
margin : 10px 20px 30px
(위:10 오른쪽,왼쪽: 20 아래: 30)
margin : 10px
(위,오른쪽,아래,왼쪽 : 10)

= padding도 동일

여러 값 따로 정의

margin-top : 10px;
margin-right : 20px;
margin-left : 30px;
margin-right : 40px;

= padding도 동일