[CSS] margin과 padding

pitdi 2024. 1. 7. 20:26

2024. 1. 7. 20:26

개요

css에서 여백을 주는 것은 margin과 padding으로 구분할 수 있습니다.
margin은 바깥쪽 여백, padding은 안쪽 여백을 지정합니다.
- padding은 여백만큼 크기가 더 커지게 됩니다.
- 각 방향마다(상하좌우) 개별 속성을 지정할 수도 있습니다.

그림으로 한번 그려보았는데요.

[margin]

[padding]

padding은 header, container, container-left 모두 동일하게 작용하지만, 최적화를 위해서는 최상위 요소 보다는 직접적으로 padding 효과를 받는 요소에 넣는 것이 좋다고 합니다.

[전체]

예제 코드 - HTML

reset.css를 적용한 후에 진행하였습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./normalize.css">
</head>
<body>
    <div class="a">a 입니다.</div> 
    <div class="b">b 입니다.</div> 
</body>
</html>

margin과 padding 적용해보기

.a{
    background-color: pink;
    margin: 10px;
    border: 2px solid black;
}

.b{
    background-color: skyblue;
    border: 2px solid black;
    padding: 10px;
}

a에는 margin을, b에는 padding을 넣어보았습니다.

margin은 바깥쪽 여백을 잡아주기 때문에 바깥에 흰 여백이 생긴 것을 확인할 수 있습니다.

반대로, padding은 안쪽 여백을 잡아주고 있어 b가 상하좌우로 10px씩 더 커진 것을 볼 수 있네요.

개별 속성 지정해보기

상하좌우로 개별 속성을 지정해보겠습니다.

.a{
    margin-top: 10px; 
    margin-left: 10px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
}

.b{
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

이렇게 top, left, right, bottom으로 각각의 여백을 설정할 수 있어요.

그렇지만 margin, padding 한 속성으로 개별 여백도 지정해볼 수 있습니다.

.a{
	/*       위   오른  아래  왼*/
	margin: 10px 50px 20px 0;
}
   
.b{   
	/*       위   오른  아래  왼*/
	padding: 10px 50px 20px 0;
}

이런식으로 설정할 수 있습니다!

결과 값은 그림과 같이 나타나게 됩니다.

여백 정도에 따라서 예상하셨겠지만, 시계 방향으로 여백이 지정되네요!

또한, 속성을 2개만 기술한다면 첫 번째 값은 상하, 두 번째 값은 좌우 여백을 지정합니다.

.a{
	/*       상하  좌우  */
	margin: 10px 50px;
}
   
.b{   
	/*       상하   좌우  */
	padding: 10px 50px;
}

그렇다면, 가장 먼저 사용해보았던 margin: 10px; 이런식으로 하나만 작성한 것은 상하좌우 모두 10px씩 margin을 주는 것이라고 이해할 수 있습니다.

margin: auto를 이용하여 중앙 정렬하기

margin: auto 속성을 사용하면, 전체 width에서 좌우로 auto 여백을 가지기 때문에 영역 안에서 중앙으로 몰아주는 효과가 있습니다.

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./normalize.css">
</head>
<body>
    <div class="a">
        <div class="b">중앙으로 정렬해보아요</div>
    </div>
</body>
</html>

.a{
    background-color: skyblue;
}

.b{
    width: 980px;
    background-color: pink;
    margin: auto;
}

이렇게 하위 태그가 선언되었을 때 하위 태그에 대해서 width를 설정해준 다음, margin: auto 속성을 부여하면 전체 width에 대해 중앙으로 정렬된 것을 볼 수 있습니다.

수직 중앙 정렬하기

번외로 margin과 padding을 이용한 수직 중앙 정렬 방법도 실습해보았습니다.

margin: auto를 통해 좌우 중앙 정렬이 가능했는데요.

여기에 padding을 추가하여 수직 중앙 정렬도 구현해볼 수 있습니다.

.a{
    background-color: skyblue;
    padding: 150px;
}

.b{
    width: 980px;
    background-color: pink;
    margin: auto;
    padding: 20px;
}

직전 html 코드에서 css에 padding을 추가해보았습니다.

이렇게 수직으로도 정렬된 결과를 확인해볼 수 있습니다.

🍀 추가로 공부해야 할 것
찾아보니 margin, padding에 음양수를 넣는 것이 달랐고, auto, collaspe를 적용할 수 있는게 달랐다.
관련해서 더 알아보자!

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

'Language Note > CSS' 카테고리의 다른 글

[CSS] reset.css (2)	2024.01.07

func(sikk)