여백 관련 CSS - margin

여백 관련 CSS - margin

• margin은 현재 요소 주변의 여백이므로 한 요소와 다른 요소 사이의 간격을 조절할 때 사용합니다.
• 기본형 : margin-top : < 크기 > / < 백분율 > / atuo
  margin-right : < 크기 > / < 백분율 > / atuo
  margin-bottom : < 크기 > / < 백분율 > / atuo
  margin-left : < 크기 > / < 백분율 > / atuo
  margin : < 크기 > / < 백분율 > / atuo
• margin-left와 margin-right를 auto로 지정하면 요소의 너비 값을 뺀 나머지 공간의 좌우 마진을 똑같이 맞춥니다. 이 방법은 웹 요소를 중앙에 배치하려고 할 때 자주 사용합니다.

속성 값	설 명
< 크기 >	너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정합니다.
< 백분율 >	박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정합니다.
auto	display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정합니다.

margin 적용 방향

• margin 속성을 이용해 마진 값을 한꺼번에 설정할 때는 값의 개수에 다라 어느 방향에 적용될지 결정됩니다.
• margin 속성에 값이 하나만 있다면 그 값은 네 방향에 모두 적용됩니다.
• margin 속성에 값이 2개라면 첫 번재 값은 서로 마주보는 margin-top과 margin-bottom 값이고 두 번째 값은 margin-right와 margin-left 값입니다.
• margin 속성에 값이 4개라면 그 순서는 top - right - bottom - left (시계방향)입니다.
• margin 속성에 값이 3개라면 빠진 값은 마주보는 방향의 스타일 속성 값을 함께 사용합니다. 즉 위쪽 마진, 오른쪽 마진, 아래쪽 마진 3개 방향의 마진 값만 주어졌을 경우 값이 주어지지 않은 왼쪽 방향의 마진 값은 맞은 편 오른쪽 마진 값을 사용합니다.

margin : 10px 30px 10px 30px (마진값이 4개일 때)

margin : 10px 30px (마진값이 2개 일 때)

margin : 30px (마진값이 1개일 때)

margin : 30px 5px 10px (마진값이 3개일 때)

<style>
    .exam1 {
        width: 300px; height: 200px;
        border: 2px solid red;
        margin-bottom: 30px;
    }
    .exam1 .box1 {
        width: 200px; height: 100px;
        border: 2px solid blue;
        margin: 10px 30px 10px 30px;
    }
    .exam2 {
        width: 300px; height: 200px;
        border: 2px solid red;
        margin-bottom: 30px;
    }
    .exam2 .box2 {
        width: 200px; height: 100px;
        border: 2px solid blue;
        margin: 10px 30px;
    }
    .exam3 {
        width: 300px; height: 200px;
        border: 2px solid red;
        margin-bottom: 30px;
    }
    .exam3 .box3 {
        width: 200px; height: 100px;
        border: 2px solid blue;
        margin: 30px;
    }
    .exam4 {
        width: 300px; height: 200px;
        border: 2px solid red;
        margin-bottom: 30px;
    }
    .exam4 .box4 {
        width: 200px; height: 100px;
        border: 2px solid blue;
        margin: 30px 5px 10px;
    }
</style>