2 박스 모델의 4가지 요소

박스 모델에는 박스의 크기와 간격을 정의하는 요소로 margin, border, padding, content 속성이 있습니다.

margin 속성

margin 속성은 border 속성을 기준으로 바깥쪽 영역을 의미합니다. 배치 작업에서 좌표를 설정할 때 사용합니다. margin 속성의 종류에는 margin-top(상단 여백), margin-right(오른쪽 여백), margin-bottom(하단 여백), margin-left(왼쪽 여백)가 있습니다.

#box_model {
    width: 300px;
    height: 300px;
    background-color: yellow;
 
    border: solid 20px red;
  
    margin-left: 50px;
    padding-left: 50px;
}

background 속성과 마찬가지로 margin 속성도 한 줄로 정리할 수 있습니다.

/* 12시를 기준으로 시계 방향으로 top, right, bottom, left 속성을 의미 */
margin: 40px 30px 20px 10px;