margin과 padding의 순서(css)

코딩/web|2020. 7. 6. 20:25

728x90

margin 또는 padding의 크기를 정해줄 때 상하좌우의 크기를 일괄적으로 같게 정해주려면 다음과 같이 간단히 코딩해주면 되지만,

 

1
margin: 10px;
cs

 

만약 각각 다르게 정해주고 싶다면 하나씩 지정해줘야합니다. 이때 순서는 상우하좌, 즉 시계방향 순입니다.

 

1
margin: 0px 10px 20px 30px; /*상 우 하 좌*/
cs

 

이것은 외우는 것이 좋겠죠. 상우하좌! 시계방향! 

 

간단한 예제를 통해 이것이 맞는지 확인시켜드리겠습니다. 

 

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin, padding 순서</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="ex1">
        마진 없음.
    </div>
    <div id="ex2">
        상하좌우 모두 10px 마진. 
    </div>
    <div id="ex3">
        상 0px, 우 10px, 하 20px, 좌 30px 마진
    </div>
</body>
</html>
cs

 

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body {
    margin: 0px; /*body 요소에 마진이 기본으로 잡혀있어서 없앴다.*/ 
}
 
#ex1 {
    background-color: #0f4c81;
    color: white;
}
 
#ex2 {
    margin: 10px;
    background-color: #0f4c81;
    color: white;
}
 
#ex3 {
    margin: 0px 10px 20px 30px; /*상 우 하 좌*/
    background-color: #0f4c81;
    color: white;
}
cs

 

html과 css에 익숙치 않은 분들을 위해서 위 코드에 대해서 간단히 설명을 드리겠습니다. id라는 것이 있습니다. <div> </div>와 같이 시작 태그와 종료 태그로 둘러싸인 것을 요소(element)라고 하는데, 그 요소의 신분증 같은 역할을 해주는 것을 id라고 합니다. id를 통해 우리는 특정 요소를 가리킬 수 있습니다. 예를 들어, index.html에서 id가 ex1인 요소를 style.css에 있는 #ex1 { }의 코드로 꾸며주는 식입니다.

 

 

id가 ex1인 요소는 마진을 주지 않기로 했고, ex2 요소는 상우하좌 모두 10px의 마진을 주기로 했고, ex3 요소는 상우하좌 각각 다른 크기만큼의 마진을 주기로 했습니다. 위 코드를 실행하면 다음과 같은 웹페이지가 생성됩니다.