IT 강좌 CSS 기초 025_여백과 패딩 - zhaoJian의 기술 노트

여백

CSS에서 여백과 패딩은 두 가지 다른 개념으로, 모두 요소 간의 공간을 제어하고 페이지 레이아웃에 영향을 주는 데 사용됩니다.

예제 효과

여백 (외부 여백)

여백(margin)은 요소와 인접한 요소 사이의 공간을 의미합니다. 여백은 요소 간의 거리를 제어하고 페이지 레이아웃에 영향을 주는 데 사용할 수 있습니다. 여백 자체에는 배경색이 없으며, 완전히 투명하고, 요소의 실제 크기에 영향을 주지 않습니다. 양수 또는 음수 값이 가능하며, 단위는 픽셀(px), 백분율(%), em 등이 될 수 있습니다.

예제:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        margin: 10%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        margin: -50px 50px;
11
        background-color: green;
12
    }
13
    .example3 {
14
        margin: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

효과: 예제 효과 margin-top, margin-right, margin-bottom, margin-left를 사용하여 특정 방향의 여백을 개별적으로 설정할 수 있습니다.

예제:

1
    .example1 {
2
        margin-top: 100px;
3
        margin-right: 50px;
4
        margin-bottom: 80px;
5
        margin-left: 50px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1"></div>

효과:

예제 효과

패딩 (내부 여백)

패딩(padding)은 요소 내부 콘텐츠와 요소 테두리 사이의 공간을 의미합니다. 패딩은 내부 콘텐츠와 테두리 사이의 거리를 조정하는 데 사용할 수 있으며, 요소의 크기와 레이아웃에 영향을 줍니다. 패딩은 요소의 배경색을 상속하며, 요소의 실제 크기에 영향을 줍니다. 음수 값은 지원되지 않으며, 단위는 픽셀(px), 백분율(%), em 등이 될 수 있습니다.

예제:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        padding: 3%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        padding: 10px 50px ;
11
        background-color: green;
12
    }
13
    .example3 {
14
        padding: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1">패딩 테스트</div>
2
    <br>
3
    <div class="base example2">패딩 테스트</div>
4
    <br>
5
    <div class="base example3">패딩 테스트</div>

효과:

예제 효과 padding-top, padding-right, padding-bottom, padding-left를 사용하여 특정 방향의 패딩을 개별적으로 설정할 수 있습니다.

예제:

1
    .example1 {
2
        padding-top: 20px;
3
        padding-right: 50px;
4
        padding-bottom: 80px;
5
        padding-left: 10px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1">패딩 테스트</div>

효과: 예제 효과

여백

여백 (외부 여백)

패딩 (내부 여백)

댓글