margin과 padding의 차이점 (마진과 패딩의 차이점)

html 여백을 줄 때, 필요한 마진(margin) 요소와 패딩(padding) 요소입니다. margin은 정의된 요소 주위에  공간 여백을 늘리는 반면, padding은 컨텐츠를 기점으로 공간이 생긴다고 보시면 되는데, 이는 쉽게 생각해서, 위로 공간이 생기는 것이 margin, 아래에 공간이 생기는 것이 padding이라고 생각하시면 됩니다.

margin값과 padding값의 상관 관계

 

예를 한번 들어볼까요

<div>로 이루어진 컨테이너 박스에 상단 40px 정도 top 여백을 주고 싶습니다.

 

이때는 padding 값을 주어야 할까요? margin 값을 주어야 할까요? 

답은 위에서도 알 수 있듯이, margin 값입니다. 

 

padding은 컨텐츠와 박스 사이에 공간감만 줄 수 있기 때문에 컨텐츠 자체를 위에서부터 밀어내려면 margin-top 값을 주어 처리해 주시면 됩니다. ​ 기본 홈페이지 레이아웃을 퍼블리싱 할 때, 마진(margin)과 패딩(padding)은 세부적으로 디테일하게 공간을 배치해 정렬과 정돈을 하게 도와주는 대표적 레이아웃 정렬의 기본 css 속성이기 때문에 손에 익히시는 게 좋습니다. ​ 

 

그럼 세부적으로 알아볼까요?

 

---

 

margin

[기본값]

margin: length|auto|inherit;

length : px, pt, cm,%와 같은 수치값을 입력 시킬 수 있습니다. 

auto:  수평을 기점으로 자동으로 양옆 속성을 맞춰줍니다. 

inherit: 부모 요소를 상속받습니다.

 

[복합 속성]

p { margin: 25px 50px 75px 100px;}

 

[개별 속성]

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

 

개별 속성의 top(상단), bottom(하단),right(오른쪽),left(왼쪽) 을 복합으로 묶어놓은 속성은 알아보기 쉽게 각각의 위치에 맞는 수치값을 넣어 마진과 패딩 값을 적용시켜주면 되는데, 복합 속성은 지원하는 수치값이 각각 다르다는 점이 있습니다.

반응형

---

 

복합 속성 수치 설정하기

css의 복합 속성 수치를 설정하는 값은 크게 총 5가지로 분류됩니다. margin(마진)과 padding(패딩)을 제외하고도 나머지 css의 수치 설정값도 밑의 예시와 동일합니다. 

※ padding은 auto 값이 없습니다.

 

(1번 예시) margin: auto; /*수평을 중심으로 중앙 정렬을 도와줍니다. */
(2번 예시) margin: 25px; /* 상하좌우 모두 25px 만큼 띄워줍니다. */
(3번 예시) margin: 25px 50px; /*상하는 25px , 좌우는 50px 만큼 띄워줍니다. */
(4번 예시) margin: 25px 50px 75px; /* 상단은 25px, 좌우는 50px, 하단은 75px 만큼 띄워줍니다.*/
(5번 예시) margin: 25px 50px 75px 100px; /* 상단은 25px, 좌측은 50px, 하단은 75px, 우측은 100px 만큼 띄워줍니다 */

 

auto 

수평을 중심으로 왼쪽과 오른쪽에 대비해 균등하게 배치해 줍니다.

 

---

 

★ margin&padding:  (상, 우, 하, 좌) 

컨테이너를 기점으로 4방향에 동일한 수치값을 지정해 줍니다.

 

---

 

★ 복합 4속성 수치 작성 시 주의점 

복합 속성은 우리가 흔히 알고 있는 4개의 수치값이 상, 하, 좌, 우로 되어있는 것이 아닌 시계방향으로 이루어져 있습니다. 즉 상, 우, 하, 좌로 이루어져 있기 때문에, (top, right, bottom, left 순서) 4속성을 사용할 때에는 0시부터 12시까지 시계가 돌아가는 모양을 생각하시면서 작업하면 편리합니다 :) 

※ 나머지 1,2,3 속성의 수치값은 위를 참고하셔서 무조건 외우실 수밖에 없습니다.

방향	0시 (상단)	3시 (오른쪽)	6시 (하단)	9시 (왼쪽)
CSS 속성 값	top	right	bottom	left

 

---

 

margin&padding: (상, 하) (좌, 우) 

컨테이너를 기점으로 상하, 좌우 2 방향에 동일한 수치값을 지정해 줍니다. 흔히 html 상에서 중앙 정렬을 할 때 많이 쓰이는  margin:0 auto;의 개념은 상하의 수치는 0 , 좌우의 수치는 중앙으로 정렬이라는 뜻과 동일합니다.

 

margin&padding: (상) (좌, 우) (하) 

컨테이너를 기점으로 상, 좌우, 하 3방향에 수치 값을 지정해 줍니다.

 

margin&padding:(상) (우) (하) (좌) 

컨테이너를 기점으로 상단, 오른쪽, 하단, 왼쪽 4방향에 각각 수치 값을 지정해 줍니다.

 

---

 

margin 속성의 혼합 ​ 더하기 

(margin+margin)

p.a { margin: 30px 0; } /* 가장 큰 값이 적용됩니다 */
p.b { margin: 20px 0; }

위와 같이 동시에 마진 값이 적용될 경우 상쇄되어 큰 값만 적용됩니다.

 

상속받기 (inherit)

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

<div> <p class="ex1">마진 값이 적용된 상속값입니다.</p> </div>

<diV>에 margin 값이 적용된 걸 그대로 inherit 속성으로 이어받아 적용시킨 모습

 

---

 

padding ​ 

컨텐츠와 컨테이너 사이에 공간감을 부여하는 padding(패딩) 값은 margin과 동일한 수치값을 적용하되 auto 값만 없다고 생각하면 됩니다. 단, 밀어내는 margin 값과는 다르게 본문을 부풀리는 효과의 padding은 수치가 벗어나는 것을 잡아주는 별도의 기능을 사용할 수 있는데, 그 속성은 box-sizing입니다.

 

---

 

padding 속성의 혼합

더하기 (padding+padding)

반응형

p.a { padding-top: 30px 0; } /* 가장 큰 값이 적용됩니다 */
p.b { padding-top: 20px 0; }

위와 같이 동시에 패딩 값이 적용될 경우 합산되어  30px+20px = 50px 이 적용됩니다.

 

---

 

컨테이너 정렬하기 (box-sizing: border-box;)

<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}
</style>

<h2>본문 제목</h2>

<div class="ex1">폭이 300px인 컨테이너</div>
<br>
<div class="ex2">폭이 300px에 padding 25px을 더한 컨테이너 값. 총 300+25+25= 350px값이 영역을 벗어나 적용 된 모습
</div>

box-sizing:border-box;로 박스를 제한해 두지 않아 영역이 벗어난 모습

 

---

 

<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>

box-sizing:border-box; 값을 이용해 width:300px; 폭을 맞추었다.

 

상단 값의 박스를 노란색 컨테이너와 맞추기 위해서는 box-sizing 속성을 이용해 컨텐츠 영역을 제한해 주면 됩니다.

 

 

본문 및 이미지 출처: https://www.w3schools.com