CSS margin 속성으로 요소 주위 여백 설정하는 방법

CSS의 margin 속성은 선택한 요소의 테두리(border) 바깥쪽에 여백 영역을 설정하는 데 사용됩니다. 이 속성은 margin-top, margin-right, margin-bottom, margin-left 네 가지 개별 속성을 한 번에 지정할 수 있는 단축(shorthand) 속성입니다.

문법(Syntax)

CSS margin 속성의 기본 문법은 다음과 같습니다.

Selector {
    margin: /*값*/
}

margin 값은 한 개부터 네 개까지 지정할 수 있으며, 개수에 따라 적용 방향이 달라집니다.

값 1개: 네 방향 모두 동일하게 적용
값 2개: 첫 번째는 상하, 두 번째는 좌우에 적용
값 3개: 순서대로 상, 좌우, 하에 적용
값 4개: 시계 방향으로 상, 우, 하, 좌에 적용

다음 예제들을 통해 CSS margin 속성의 사용법을 살펴보겠습니다.

예제 1

<!DOCTYPE html>
<html>
<head>
<style>
body * {
    display: flex;
    float: left;
    margin: 10px 15px;
    border: thin solid;
    text-align: center;
    width: 40%;
    border-radius: 5%;
    box-shadow: 0 0 4px 1px grey;
}
p {
    font-family: "Sim Sun", monospace;
    background-color: lightcyan;
}
div {
    font-family: Impact, cursive;
    background-color: lightgreen;
}
</style>
</head>
<body>
<p>First demo text</p>
<div>A demo line goes like this..</div>
</body>
</html>

출력 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS margin 속성으로 요소 주위 여백 설정하는 방법

이 예제에서는 margin: 10px 15px;를 사용해 요소의 상하 여백을 10px, 좌우 여백을 15px로 설정했습니다.

예제 2

<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
    margin: 5% 30%;
    border: 12px double red;
    padding: 0.5rem;
    border-radius: 30px;
}
td:nth-child(even) {
    background-color: lightblue;
}
td:nth-child(odd) {
    background-color: lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

출력 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS margin 속성으로 요소 주위 여백 설정하는 방법

이번 예제에서는 백분율(%) 단위를 사용해 margin: 5% 30%;로 여백을 지정했습니다. margin에는 px, em, rem 같은 절대·상대 단위뿐 아니라 부모 요소 기준의 백분율 값도 사용할 수 있습니다.