Box Model의 margins 속성

 

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

 

🟢   margins

가장 바깥쪽 공간으로, 요소와 요소 사이의 바깥쪽 여백(공간)을 조절하는 속성.

• 투명 영역: 배경색이나 배경 이미지가 적용되지 않고 투명하다.
• 음수 값: 음수(-) 값을 사용할 수 있다. 요소를 위로 끌어올리거나 겹치게 만들 수 있다. (남용 시 레이아웃 깨짐)

 

◼️ 가로 가운데 정렬

width 지정 후, 마진을 0(위/아래) auto(좌/우-자동계산)로 설정하면 브라우저가 남는 공간을 좌우로 균등 분배해서 요소를 가운데 정렬하는 방식.

.box { width: 1100px;
       margin: 0 auto;
}

• 문법: margin: 0 auto;
• block 요소여야 한다.
  • 적용 가능: div, section, article.
  • 적용 불가능: span, a (inline 상태)

 

📐 개별 속성

특정 방향에만 여백 조절 속성.

.box { margin-top: 10px; }
.box { margin-right: 20px; }
.box { margin-bottom: 30px; }
.box { margin-left: 40px; }

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

 

🔨 축약형 속성 (Shorthand)

여백을 한 줄로 정의하는 속성.

.box { margin: 20px; } /* 1개: 상하좌우 모두 20px */
.box { margin: 10px 20px; } /* 2개: 상하 10px / 좌우 20px */
.box { margin: 10px 20px 30px; } /* 3개: 상 10px / 좌우 20px / 하 30px */
.box { margin: 10px 20px 30px 40px; } /* 4개: 상 10px / 우 20px / 하 30px / 좌 40px (시계 방향) */

 

---

 

⚠️  Margin Collapsing (마진 상쇄) ⚠️

인접한 두 블록 요소의 상하(세로) 마진이 만날 때, 두 마진의 합이 아닌 더 큰 쪽의 마진이 적용되는 현상.

.box1 { margin-bottom: 50px; } /* 큰 값만 적용 */
.box2 { margin-top: 30px; } /* 작은 값은 적용 안됨 */

• 부모 요소와 첫/마지막 자식 요소 사이에서 주로 발생한다.
  • 리스트나 문단 사이의 간격이 너무 벌어지는 것을 막기 위한 브라우저의 기본 동작.
• 좌우(가로) margin은 안 겹침, 각각 적용된다.
• inline 요소에는 제한 있음. (span 같은 요소는 좌우 margin만 정상 적용하고 위아래는 거의 영향 없음)

👉 해결 방법: 부모에 {padding-top: 1px;} 또는 {border-top: 1px solid transparent} 또는 float/flex/grid 사용.

 

 

📍  POINT 📍 

✔️ 마진은 요소와 요소 사이의 거리를 두기 위해 사용한다. ✔️

✔️ 블록 요소를 가로 중앙에 배치하고 싶다면 너비(width)를 지정하고 margin: 0 auto; 를 사용한다. ✔️

✔️ 상하 간격이 좁다면 마진 상쇄가 일어나고 있지 않은지 확인한다. ✔️

 

 

📋 마진 vs 패딩 핵심 비교표 📋

구분	마진 (Margin)	패딩 (Padding)
위치	테두리 바깥쪽	테두리 안쪽
역할	요소 간 간격	내용과 테두리 간 여백
음수 값	가능	불가능
중앙 정렬	margin: auto로 가능	불가능
배경색	불가능 (항상 투명함)	가능

 

---

 

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

<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>