[CSS] margin과 padding

자주 쓰지만 항상 어떤 속성을 사용할지 고민하게 되는 margin과 padding.

여러가지를 참고하며 작성하는 글이지만 사실 아직 어느 상황에 써야 맞는지 헷갈리는건 여전하다.

그래도 검색하면서 다른 사람들도 많이 헷갈려 하는구나.. 라는 위안을 얻으며 기록해본다.

 

---

🔎 BOX MODEL

 

HTML은 4가지 박스 형태로 만들어진다. 이 네가지 영역을 박스모델이라고 한다.

HTML element가 웹 페이지에서 차지하는 공간을 정의한 모델

▪️ content: 내용이 담긴 부분

▪️ padding: border와 content사이의 영역

▪️ border: element를 감싸는 경계

▪️ margin: border의 바깥 영역

 

---

🔎 비교

 

✅ margin: 바깥쪽 여백

✅ padding: 안쪽 여백

	양수 (+)	음수 (-)	auto	collapse
margin	O	O	O	O
padding	O	X	X	X

 

 

1️⃣ 양수, 음수

 

margin은 음수 값이 적용되지만 padding은 음수 값이 적용되지 않는다.

 

padding은 뼈와 피부 사이의 지방, margin은 사람과 사람 사이의 간격

(부스트코스 강의에서 나온 설명)

 

지방(padding)은 아무리 빼도 피부가 뼈보다 밑으로 갈 수 없으며, 양수만 가능하다.

반면 사람과 사람 사이(margin)은 멀리 떨어질 수도 있지만, 서로 겹쳐 서 있을수도 있다.

그래서 이땐 음수 값이 가능하다.

 

 

2️⃣ auto

 

auto는 브라우저에 의해 계산이 되는 값이다. 0이나 해당 요소가 사용 가능한 공간과 같은 값을 가지게 된다.

 

만약 좌우 margin이 모두 auto면, 해당 요소가 가질 수 있는 가로 영역 중 자신의 width를 제외한 나머지 여백 크기를 균등 분할하여 적용한다. 그래서 수평으로 가운데 정렬이 된다.

 

💡가운데 정렬을 위해 margin: auto; 또는 margin: 0 auto; 이런식으로 사용한다.

 

padding은 auto로 선언할 수 없다.

 

 

3️⃣ collapse

 

margin은 둘 이상의 요소중 margin 값이 더 큰 margin 값으로 합쳐지는 특징이 있다.

 

💡 음수 값을 가졌다면 더 작은 값. 즉, 절대값이 더 큰 값으로 합쳐진다. 음수와 양수 값이 합쳐질 때는 제일 큰 양수 값과 제일 작은 음수 값의 합이 margin 값이 된다.

 

이걸 margin colloapse (마진 병합) 라고 한다.

 

 

✅ 마진 상쇄가 일어나는 상황

 

 

1.  인접 형제 박스 간 상하 마진이 겹칠때

 

겹쳐진 두 마진 값을 비교해, 더 큰 마진 값으로 상쇄해 렌더링 한다. 만약 겹쳐진 두 값이 동일할 경우 중복을 상쇄해 렌더링한다.

 

2.  빈 요소의 상하 마진이 겹칠 때

 

💡빈 요소란 높이(height)가 0인 상태의 블록 요소를 말한다.

 

▪️ height / min-height / padding / border 등 상하로 늘어나는 프로퍼티 값을 명시적으로 주지 않았을 경우

▪️ 내부에 inline 콘텐츠가 존재하지 않는 요소

 

이 경우 위와 아래를 가르는 경계가 없으므로, 자신의 상단 마진의 값과 하단 마진의 값을 비교해 더 큰 값으로 상쇄한다.

만약 겹쳐진 두 값이 동일할 경우, 중복을 상쇄한다.

특히 빈 요소와 인접 박스들 간에 마진 겹침이 일어나는 구조에서는 다음과 같이 상괘가 여러번 발생한다.

 

3.  부모 박스와 첫 번째(마지막) 자식 박스의 상단(하단) 마진이 겹칠 때

 

마진이란 콘텐츠 간의 간격이고, 간격을 벌리기 위해서는 경계를 필요로 한다. 

브라우저는 부모 박스와 첫 번째(마지막) 박스 간의 경계를 그 사이에 있는 border / padding / inline 콘텐츠의 유무로 판단한다.

 

따라서 부모의 첫 번째(마지막) 자식 사이에 inline 콘텐츠(텍스트 등)가 없거나, 상단(하단)에 명시적으로 padding 또는 border 값을 주지 않았다면 마진이 겹치게 된다. 

 

이때, 자식 요소의 마진이 더 크든 작든 상관없이 상쇄된 마진은 부모 박스의 바깥으로만 렌더링이 된다.

 

3-1. 부모 박스와 첫 번째 자식 박스의 상단 마진이 나란히 겹칠 때

 

3-1. 부모 박스와 첫 번째 자식 박스의 상단 마진이 나란히 겹칠 때

 

❗❗❗그래서

 

다음과 같이 부모 박스 상단(하단)에 padding 또는 border 값을 주어 벽을 만들어주는 것이 안전하다.이렇게 하면 의도했던 대로 첫 번째(마지막) 자식 요소를 배치할 수 있다.

 

✅ 마진 상쇄 규칙 예외

 

▪️박스가 position: absolute 된 상태

▪️박스가 float: left/right 된 상태 (단, clear 되지 않은 상태)

▪️박스가 display: flex 일 때 내부 flexbox item

▪️박스가 display: gird 일 때 내부 grid item

 

 

padding은 collapse가 발생하지 않는다.

---

🔎 % 의 기준점

 

margin과 padding 모두 고정적인 단위와 상대적인 단위를 사용할 수 있다. 

이 중, 상대적인 단위의 %의 기준점은 바로 width 값이다.

 

div {
	width: 100px;
    height: 200px;
    margin: 10%;
    padding: 10%;
}

위의 div 태그의 margin과 padding 값은 상화좌우 모두 10px로 적용된다.

width값을 기준으로 적용 되기 때문이다.

 

 

 

 

둘의 차이를 알아두고, 필요에 따라 적절히 사용해보자.

 

 

 

📌 참고사이트

 

MDN ::: 여백 상쇄 정복