CSS Margins property

 

이미지 출처

https://codingeverybody.kr/css-margin-%EC%86%8D%EC%84%B1/

---

요소와 요소 사이의 바깥쪽 여백을 결정하는 CSS 마진(Margin) 속성에 대해 알아보겠습니다.

마진은 박스 모델의 가장 바깥쪽 영역으로, 인접한 다른 요소들과의 거리를 조절하여 화면의 균형을 잡는 역할을 합니다.

---

1. 정의 및 특징

마진은 테두리(Border) 바깥의 공간을 의미합니다.

• 투명함: 패딩과 달리 마진 영역에는 배경색이나 배경 이미지가 적용되지 않고 항상 투명합니다.
• 음수 값 가능: 마진에는 음수(-) 값을 사용할 수 있습니다. 이를 통해 요소를 원래 위치보다 이동시키거나 다른 요소와 겹치게 만들 수 있습니다.
• auto 값: 수평 마진을 auto로 설정하면 브라우저가 남은 공간을 반으로 나눠 가져가므로, 요소를 가로 중앙에 배치할 때 자주 쓰입니다.

---

2. 개별 속성과 축약형 (Shorthand)

네 방향을 각각 조절하거나 한 번에 선언할 수 있습니다.

개별 속성

• margin-top: 위쪽 여백
• margin-right: 오른쪽 여백
• margin-bottom: 아래쪽 여백
• margin-left: 왼쪽 여백

축약형 작성법 (시계 방향 원칙)

적는 값의 개수에 따라 적용되는 방식이 달라집니다.

CSS

 

/* 1개: 상하좌우 모두 20px */
margin: 20px;

/* 2개: 상하 / 좌우 (위아래 10px, 양옆 20px) */
margin: 10px 20px;

/* 3개: 상 / 좌우 / 하 (위 10px, 양옆 20px, 아래 30px) */
margin: 10px 20px 30px;

/* 4개: 상 / 우 / 하 / 좌 (시계 방향: 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px) */
margin: 10px 20px 30px 40px;

---

3. 마진 상쇄 (Margin Collapsing) 현상

마진을 다룰 때 가장 주의해야 할 독특한 특징입니다.

인접한 두 블록 요소의 상하 마진이 만날 때, 두 마진의 합이 아닌 더 큰 쪽의 마진으로 합쳐지는 현상을 말합니다.

• 언제 발생하나요?: 위아래로 인접한 요소 사이, 또는 부모와 첫 번째/마지막 자식 요소 사이에서 주로 발생합니다.
• 왜 발생하나요?: 리스트나 문단 사이의 간격이 너무 벌어지는 것을 막기 위한 브라우저의 기본 동작입니다.

---

🖥️ 실전 예제 코드: "중앙 정렬과 간격 조절"

HTML

 

<style>
  .box {
    width: 200px;
    height: 100px;
    background-color: #e74c3c;
    color: white;
    
    /* 상하 50px 여백, 좌우 auto로 가로 중앙 정렬 */
    margin: 50px auto; 
    
    /* 텍스트 정렬용 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .overlap {
    background-color: #2ecc71;
    /* 음수 마진을 사용해 위의 박스와 20px 겹치게 함 */
    margin-top: -70px; 
    margin-left: 50px;
  }
</style>

<div class="box">중앙 박스</div>
<div class="box overlap">겹친 박스</div>

---

📋 마진 vs 패딩 핵심 비교표

구분	마진 (Margin)	패딩 (Padding)
위치	테두리 바깥쪽	테두리 안쪽
음수 값	사용 가능	사용 불가능
중앙 정렬	margin: auto로 가능	불가능
배경 영향	항상 투명함	배경색이 채워짐

---

학습 정리

• 마진은 요소와 요소 사이의 **"거리"**를 두기 위해 사용합니다.
• 블록 요소를 가로 중앙에 배치하고 싶다면 **너비(width)를 지정하고 margin: 0 auto;**를 사용하세요.
• 상하 간격이 생각보다 좁다면 마진 상쇄가 일어나고 있지 않은지 확인해 보세요.

---

요소 사이의 간격을 조절하는 마진 속성을 정복하셨습니다!

---