링크허브 공식블로그 :: CSS

모든 HTML의 요소는 BOX로 간주 할 수 있습니다. CSS에서는 디자인과 레이아웃에 대해 "박스 모델"이라는 용어를 사용합니다. CSS 박스 모델은 본질적으로 모든 HTML 요소를 감싸는 상자입니다. 여백, 테두리, 패딩 및 실제 내용으로 구성됩니다. 아래 이미지는 box model을 단순하게 시각화 한 이미지 입니다.

margin과 padding

웹사이트를 제작할때의 골격을 잡을때 margin과 padding 두 용어는 여백의 이미로 많이 사용 되고 있습니다. width와 heght 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다. 내부 여백은 padding, 외부여백은 margin 이라는 용어를 사용합니다. 그림을 통해서 margin과 padding 영역을 확인 해 보겠습니다.

위 그림^[각주:1]은 CSS Box Model의 단면도 입니다.

안쪽에서 밖으로 content, padding, border, margin으로 구분됩니다.

그림을 잘 살펴보시면 margin은 border를 기준으로 바깥쪽에 위치해 있고

padding은 border를 기준으로 안쪽에 위치해 있습니다.

border는 박스에서 경계면을 뜻하며 경계면을 기준으로 margin과 padding을 구분합니다.

방향성

margin과 padding의 값은 상하좌우 방향마다 여백을 다르게 설정할 수 있습니다.

margin: 10 5 10 5px;위 10px 오른쪽 5px 아래 10px 왼쪽 5px을 4개의 수치는 위에서부터 시계방향으로 위 오른쪽 아래 왼쪽 순서로 설정합니다.

margin: 10px 같은 표현은 상하좌우 모두 10px을 의미합니다.

margin: 20px 10px은 상하 20px, 좌우 10px을 의미합니다.

margin: 10px 20px 30px은 위30px, 좌우20px, 아래 40px을 의미합니다.

즉 방향의 위부터 시계방향으로 회전하여 위 오른쪽 아래 왼쪽 순서로 설정합니다.

마진겹침(margin-collapsing) 현상


<span class="repeat">
  margin: 50px
</span>
<span class="repeat">
  margin: 50px
</span>


.repeat{
    border:1px solid black;
    display:block;
    margin:50px;
    width:120px;
    height:120px;
}

display:block 속성을 주고 margin을 상하좌우 50px 입력 하였습니다. 실행하면 어떤 결과가 나올 까요? 첫번째 박스의 margin-bottom : 50px과 두번째 박스의 margin-top : 50px로 인해서 두사이의 간격은 100px이라고 생각 하실 수 있습니다. 하지만 두 개 이상의 margin이 세로 방향으로 만났을때 값이 큰 margin 하나로 합쳐지는 현상이 일어 납니다. 이 현상을 제대로 이해하지 못하고 작업을 진행할때 이해 할 수 없는 CSS의 동작으로 인해서 멘붕이 올 수도 있으니 꼭 확인해 보시는게 좋겠습니다.