# CSS 여백

# CSS 바깥여백(margin)

CSS margin 속성은 정의 된 테두리 밖의 요소 주위에 공백을 만드는 데 사용됩니다.
요소의 각면 (위쪽, 오른쪽, 아래쪽, 왼쪽)의 여백을 설정하는 속성이 있습니다.

# 각 방향의 여백(margin)

CSS에는 요소의 각면에 대한 여백을 지정하는 속성이 있습니다.

• margin-top
• margin-right
• margin-bottom
• margin-left

모든 margin 속성은 다음 값을 가질 수 있습니다.

• auto - 브라우저가 여백을 계산합니다.
• length - px, pt, cm 등의 여백을 지정합니다.
• % - 포함하는 요소의 너비에 대한 여백을 %(10%, 20% ...)로 지정합니다.
• inherit - 부모 요소에서 여백을 상속해야 함을 지정합니다.

<style>
div {
    border: solid;
}
p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
    border: solid;
}
</style>
<div>
    <p>이 요소 주위에 여백이 생성됩니다.</p>
</div>

전체 소스로 실습하기

# margin shorthand - 한줄로 작성하기

margin 역시 border 에서 그랬던 것처럼 코드를 줄이기 위해 하나의 속성에서 모든 여백 속성을 지정할 수 있습니다. 순서도 border 에서와 같이 시계방향입니다.
순서는 다음과 같습니다.

margin-top, margin-right, margin-bottom, margin-left

실제로 다음과 같이 사용합니다.

p {
    margin: 25px 50px 75px 100px;
}
/* 위의 코드는 아래와 같습니다.  */
p {
    margin-top: 25px;
    margin-right: 50px;
    margin-bottom: 75px;
    margin-left: 100px;
}

전체 소스로 실습하기

만약 margin 이 3개의 값을 가진다면 top, right & left, bottom 의 값입니다.
실제로 다음과 같이 사용합니다.

p {
    margin: 25px 50px 75px;
}
/* 위의 코드는 아래와 같습니다.  */
p {
    margin-top: 25px;
    margin-right: 50px;
    margin-bottom: 75px;
    margin-left: 50px;
}

전체 소스로 실습하기

margin 이 2개의 값을 가진다면 top & bottom, right & left 의 값을 가집니다.

p {
    margin: 25px 50px;
}
/* 위의 코드는 아래와 같습니다.  */
p {
    margin-top: 25px;
    margin-right: 50px;
    margin-bottom: 25px;
    margin-left: 50px;
}

전체 소스로 실습하기

margin 이 1개의 값을 가진다면 모든 방향이 같은값을 가집니다.

p {
    margin: 25px;
}
/* 위의 코드는 아래와 같습니다.  */
p {
    margin-top: 25px;
    margin-right: 25px;
    margin-bottom: 25px;
    margin-left: 25px;
}

전체 소스로 실습하기

# margin auto 값

margin 속성을 auto로 설정하여 컨테이너 내에 요소를 가로로 가운데 놓을 수 있습니다.
요소는 지정된 너비를 차지하고 나머지 공간은 왼쪽 및 오른쪽 여백 사이에서 균등하게 분할됩니다.

<style>
    .container {
        height: 100px;
        width: 100%;
        border: 1px solid skyblue;
    }
    .margin-auto-box {
        height: 50px;
        width: 300px;
        margin: auto;
        border: 1px solid red;
    }
</style>
<div class="container">
    <div class="margin-auto-box"></div>
</div>

div {
    margin: 0 auto;
}

<style>
    div.wrap {
        height: 100px;
        width: 100%;
        border: 1px solid skyblue;
    }
    div.auto {
        width: 150px;
        margin: 0 auto;
        border: 1px solid red;
    }
</style>
<div class="wrap">
    <div class="auto">margin: 0 auto</div>
</div>

전체 소스로 실습하기

# margin inherit 값

이 예제에서는 <p class="ex1"> 요소의 왼쪽 여백을 상위 요소 (<div class="ex1">)에서 상속 할 수 있습니다.

<style>
    div {
        border: 2px solid green;
    }
    div.ex1 {
        border: 2px solid red;
        margin-left: 100px;
    }

    p.ex1 {
        border: 2px solid blue;
        margin-left: inherit;
    }
</style>
<div>
    <div class="ex1">
        <p class="ex1">inherit 값으로 부모의 여백을 상속</p>
    </div>
</div>

전체 소스로 실습하기

# margin 축소

요소의 위쪽 및 아래쪽 margin은 두 개의 여백 중 가장 큰 것과 동일한 단일 여백으로 축소됩니다.
왼쪽, 오른쪽 여백에는 이런 일이 발생하지 않습니다.
위쪽, 아래쪽 여백만 발생합니다.

<div style="background: skyblue;">
    <div style="margin: 0 0 50px 0;background: green;">111</div>
    <div style="margin: 20px 0 0 0;background: grey;">222</div>
</div>

위에서 111과 222 사이의 여백은
111 에서의 하단여백 50px 과 222 에서의 상단여백 20px이 합쳐진
70px 이 될 것이라고 생각할 수 있지만
둘중에 큰 값인 50px으로 축소되어 적용됩니다.

<div style="background: skyblue;">
    <div style="margin: 0 50px 0 0;background: green;">111</div>
    <div style="margin: 0 0 0 50px;background: grey;">222</div>
</div>  

좌우 여백에 대해서는 별로 상관이 없습니다.
전체 소스로 실습하기