CSS에서 margin 여백 작업하기

지금은 사이트 요소들 사이의 여백을 설정하는 속성인 margin에 대해 알아보겠습니다. 실제로 어떻게 보이는지 확인해 봅시다.

먼저 margin이 없는 두 개의 중첩된 블록을 보여드리겠습니다 (그들은 서로 붙어서 이중 테두리가 보일 것입니다):

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 300px;
  border: 1px solid red;
}
#child {
  height: 100px;
  border: 1px solid green;
}

Результат:

이제 내부 블록에 30px의 margin을 설정해 보겠습니다:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 300px;
  border: 1px solid red;
}

#child {
  height: 100px;
  border: 1px solid green;
  margin: 30px;
}

Результат: