CSS에서 margin 여백 작업하기
지금은 사이트 요소들 사이의 여백을 설정하는
속성인 margin에 대해 알아보겠습니다.
실제로 어떻게 보이는지 확인해 봅시다.
먼저 margin이 없는 두 개의 중첩된
블록을 보여드리겠습니다 (그들은 서로 붙어서
이중 테두리가 보일 것입니다):
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 300px;
border: 1px solid red;
}
#child {
height: 100px;
border: 1px solid green;
}
:
이제 내부 블록에 30px의
margin을 설정해 보겠습니다:
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 300px;
border: 1px solid red;
}
#child {
height: 100px;
border: 1px solid green;
margin: 30px;
}
:
