[HTML&CSS] 마진(margin) 속성, 패딩(padding) 속성

Language & Solution/HTML&CSS
2019. 10. 8. 16:50

*아래 링크를 누르시면 HTML, CSS 코드 실행환경을 만들 수 있습니다.

[Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기

| 마진(margin)

마진(margin)은 요소 주변 여백을 뜻합니다. 마진의 크기를 조절함으로서 다른 요소 사이에 간격을 남겨 유저 친화적인 UI를 구사할 수 있죠.

마진 속성에는 margin-top, margin-right, margin-bottom, margin-left가 있습니다. 이름에서 알 수 있듯 위, 오른쪽, 아래쪽, 왼쪽 여백들을 가리키는 속성들이며 이를 한 번에 표기할 수 있는 margin이란 속성도 있습니다. 사용법은 다음과 같습니다.

margin : <크기> | <백분율> | auto

margin-top : <크기> | <백분율> | auto

margin-right : <크기> | <백분율> | auto

margin-bottom : <크기> | <백분율> | auto

margin-left : <크기> | <백분율> | auto

크기	px 혹은 cm 단위와 함께 수치 지정
백분율	박스 모델을 포함한 부모 요소를 기준으로 % 지정
auto	display 속성에서 지정한 값에 맞게 자동으로 크기 조절

| 마진(margin) 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background: #ffbc8a;
        }
        .box1 { margin: 30px 50px 30px 50px;}
        .box2 { margin: 30px 50px;}
        .box3 { margin: 50px;}
        .box4 { margin: 30px 5px 10px;}
        .box-auto {
            margin:0 auto;  /* 너비 값을 뺀 나머지 공간의 좌우 마진을 똑같이 맞춥니다. */
        }
    </style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
<div class="box-auto">
</div>
</body>
</html>

| 패딩(padding)

패딩(padding)은 콘텐츠 영역과 테두리 사이의 여백입니다.

패딩과 관련된 css속성에는 padding-top, padding-right, padding-bottom, padding-left, padding 있으며 각각 위, 오른쪽, 아래, 왼쪽, 네 방향 패딩을 한꺼번에 지정할 수 있습니다.

패딩을 사용하는 방법은 margin과 같으므로 여기서는 생략하도록 하겠습니다.

| 패딩(padding) 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background: #ffbc8a;
            margin: 20px;
            color: #F46075;
        }
        .box1 { padding: 10px 30px 10px 30px;}
        .box2 { padding: 30px 50px;}
        .box3 { padding: 50px;}
    </style>
</head>
<body>
    <div class="box1">
        패딩의 여백1
    </div>
    <div class="box2">
        패딩의 여백2
    </div>
    <div class="box3">
        패딩의 여백3
    </div>
</body>
</html>

저작자표시 비영리 변경금지

'Language & Solution > HTML&CSS' 카테고리의 다른 글

[HTML&CSS] position 속성 정리하기! (1)	2019.10.10
[HTML&CSS] box-sizing, float, clear (0)	2019.10.08
[HTML&CSS] 콘텐츠(content) 영역 (0)	2019.10.07
[HTML&CSS] 테두리(border) 영역 (0)	2019.10.07
[HTML&CSS] 박스모델 (Box Model) (0)	2019.10.07