Margin과 Padding

오늘은 css의 기본(?)인 margin과 padding에 대해서 이야기하려고 합니다. 매일 margin과 padding이 무엇인지 정확히 알지 못하고 margin은 요소(element)에 겉 부분에 효과를 주어서 간격을 만들고 padding은 내부에 효과를 주어서 간격을 만든다는 정도로만 알고 있었습니다. 지금 보는 이미지는 현재 보시는 홈페이지에서 마우스 우클릭 후 검사(F12) 탭을 누르시면 확인하실 수 있습니다.

가장 바깥쪽 부터 Margin, Border, Padding, Content 영역입니다.
Content는 요소의 실제 내용을 나타내고 내용의 너비 및 높이를 나타냅니다.
Border는 Content 영역을 감싸는 테두리입니다.
Padding은 Content와 Border 사이의 여백을 나타내는 영역입니다. Padding 영역도 Content의 연장으로 볼 수 있습니다.

Margin

• margin은 요소의 테두리(border) 밖의 공간입니다.
• 요소와 인접한 요소 사이에 공간을 만듭니다.
• 여백에는 배경색이 없으며 요소 자체의 크기에 영향을 주지 않습니다.
• 두 요소가 서로 닿는 margin이 있는 경우 margin collapse(마진 병합)이 발생합니다. ★

아래 이미지를 보시면 색깔만 다른 div 박스 두 개가 있고 하나는 오른쪽으로 하나는 왼쪽으로 각각 margin 속성을 적용시켜주었습니다. 위에 적은 4가지 특징 중 일단 마지막 마진 병합을 제외하고는 확인을 할 수 있습니다. 생각해 보면 정말 당연하게 생각이 드는 특징들입니다.

style.css

body {
  font-family: sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
div {
  width: 300px;
  height: 300px;
}

.box1 {
  background-color: red;
  margin-right: 50px;
}

.box2 {
  background-color: blue;
  margin-left: 50px;
}

html

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

margin collapse

margin collapse(붕괴)란 말 그대로 마진이 서로 간격이 유지되지 않고 하나의 margin으로 합쳐지는 현상입니다. 보시는 것처럼 빨간 박스에 margin-bottom: 100px을 적용하고 파란 박스에 margin-top: 100px을 적용하면 사이에 간격이 200px이 되어야 할 텐데 그렇지 않고 서로 겹쳐셔 100px을 유지하고 있습니다.

style.css

body,
html {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}
div {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.box1 {
  background-color: red;
  margin-bottom: 100px;
}

.box2 {
  background-color: blue;
  margin-top: 100px;
}

Padding

• 패딩은 요소의 내용과 테두리 사이의 공간입니다.
• 콘텐츠와 테두리 사이에 요소 내부에 공간을 만듭니다.
• 패딩은 배경색을 가질 수 있으며 요소의 크기에 영향을 주어 크기를 증가시킵니다.