티스토리 뷰

Programming/HTML&CSS

[HTML5/CSS3] CSS 속성 강좌 #2 - margin과 padding의 차이

Lkt_Programmer 2019. 3. 31. 12:32
반응형

안녕하세요. 오늘은 CSS 속성 중 margin과 padding에 대해서 포스팅을 하고자 합니다. margin과 padding 속성의 경우 웹 페이지의 요소 배치와 관련해서 아주 중요한 속성이라고 할 수 있습니다. 반드시 margin과 padding 속성에 대해 정확히 알고 두 속성의 차이점에 대해서도 반드시 이해를 하셔야 합니다.



margin과 padding은 html 요소사이의 간격을 설정 할 수 있는 속성인데 적용이 되는 형태에 차이가 있습니다. 아래 그림을 참고해주세요.


▼마치 붉은색 사각형 영역안에 파란색 사각형이 들어간 형태로 보이지만 사실 붉은색 영역은 공백영역이라고 생각하시면 됩니다. 먼저 왼쪽 영역의 파란색 사각형을 original size라고 생각하고 보시길 바랍니다. 상하좌우 각각 50px의 margin 영역값을 설정한 형태로 자신의 original size를 유지한 채로 다른 요소와의 상하좌우 여백을 50px만큼 준다는 의미로 해석이 가능합니다. 반대로 padding의 경우 같은 상하좌우 50px만큼 적용되었다고 하였을 때 자신의 original size를 50px만큼 키워서 여백을 설정하게 됩니다.

▼margin 속성값을 지정하는 형태는 위와 같습니다. top을 시작으로 시계방향으로 top-right-bottom-left 순으로 지정이 됩니다. margin-top 속성과 같이 하나씩 지정도 가능합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {margin : 0px;}
        div {
            width : 100px;
            height : 100px;
        }
        #content1 {
            background-color : red;
        }
        #content2 {
            background-color : green;
            margin : 10px 0px 0px 10px;            
        }
        #content3 {
            background-color : blue;
            padding : 50px;
        }
    </style>
</head>
<body>
    <div id = "content1">
        Content1
    </div>
    <div id = "content2">
        Content2
    </div>
    <div id = "content3">
        Content3
    </div>
</body>
</html>
cs


▼<div>태그를 통해 3개의 영역으로 나누었습니다. 사이즈는 동일하게 주고 각 영역의 구분을 위해 background-color 속성을 다르게 지정 하였습니다. 웹 페이지에서 나오는 형태를 살펴 보겠습니다.


▼Content1의 경우 margin이나 padding 속성값을 부여하지 않았습니다. 여백없이 다른 요소에 딱 붙어 있는 것을 확인 할 수 있습니다. 반대로 Content2 영역의 경우 top과 left에 margin을 10px씩 지정하고 있습니다. Content1영역 사이에 10px만큼 여백이 생겼고 왼쪽으로도 여백이 생긴 것을 확인 할 수 있습니다. Content3의 경우 전 영역에 padding 값을 50px를 지정하고 있습니다. 자신의 원래 사이즈에서 사이즈가 확장 된 것을 확인 할 수 있습니다.

반응형
저작자표시 비영리

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

[HTML5/CSS3] CSS 속성 강좌 #4 - border 속성  (0) 2019.04.04
[HTML5/CSS3] CSS 속성 #3 - box-sizing 이해  (0) 2019.04.02
[HTML5/CSS3] CSS 속성 강좌 #1 - display/opacity/visibility  (0) 2019.03.29
[HTML5/CSS3] CSS 선택자 #4 - 반응/상태/구조 선택자  (0) 2019.03.28
[HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자  (0) 2019.03.27