본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

박스 모델 (margin과 padding)

최초 작성일
최종 수정일
이번 시간에는...
CSS 레이아웃을 잡을 때, 가장 기본이 되는 박스 모델의 구성을 margin(바깥 여백)과 padding(안 여백) 속성을 통해 알아봅니다. 이를 통해 실질적인 width(너비)와 height(높이) 값을 어떻게 줘야 하는지도 알아봅니다.

이번에 살펴볼 속성들은 앞으로 여러분들이 페이지 레이아웃을 잡을 떄, 기초가 되는 속성들입니다. 주로 인라인 보다는 블록 요소에 해당하는 속성들로, 높이와 너비, 여백 등에 대해서 살펴보겠습니다.

margin

마진(margin)은 요소와 요소와의 간격, 즉 바깥 여백을 주는 속성입니다. 주로 px, em, % 등의 단위를 사용합니다.

border 속성과 마찬가지로 방향에 따라 속성을 줄 수 있으며, 줄여서 쓸 수도 있습니다.

margin은 요소 간의 간격으로 마진끼리는 서로 겹쳐져서 둘 중 큰 간격만큼 벌어집니다. 예를 들어 다음의 소스를 보세요.

위와 같이 Box1과 Box2 사이에 margin으로 간격을 줄 경우, 두 요소간 간격은 큰 간격인 30px이 됩니다.

Box 1에는 margin-bottom 10px를 Box 2에는 margin-top 30px를 주었습니다.
요소간의 margin이 겹칠 때, 둘 중 큰 간격으로 간격이 벌어집니다.

padding

패딩(padding)은 요소 안, 내부 여백을 주는 속성입니다. 작성하는 방식은 margin과 동일합니다.

width, height

width와 height는 각각 너비와 높이를 지정하는 속성입니다. 이 width와 height는 블록 요소에만 적용 가능합니다.

주로 px, em, % 등의 단위가 값으로 올 수 있습니다. 이 중 %를 사용할 경우, 보통 부모요소의 너비 또는 높이를 기준으로 적용됩니다.

하지만 주의해야 할 부분이 같은 너비나 높이를 주더라도, padding이 있다면 실제 크기는 더 커지게 됩니다.

박스 모델 (Box Model)

다음의 이미지를 보시면, width나 height 값이 여러분의 예상과 조금 다를 수 있다는 것을 알 수 있습니다.

박스 모델에서 margin은 바깥에, padding은 박스 안에 그리고 width와 height는 그 안에 있습니다.
박스 모델

보시는 대로, widht와 height는 padding과 border를 제외한 길이 입니다.

때문에, 만약 여러분이 테두리 굵기는 2px에 여백이 한 5px 정도 되는 박스의 총 너비를 100px로 맞추고 싶다면, width를 86px로 주셔야 합니다.

총 너비(100px) - 왼쪽 테두리 (2px) - 왼쪽 여백 (5px) - 오른쪽 여백 (5px) - 오른쪽 테두리 (2px) = 86px

박스 모델에서 너비 속성 값은 border와 padding을 뺀 나머지 값이 들어갑니다.
width의 실제 너비

이런 부분은 대부분의 초보자 분들이 종종 헷갈려 하는 부분입니다. 특히 너비를 '%' 단위로 줄 경우 굉장히 난감할 수 있는 부분입니다. 이에 대해서는 요소를 한 번 더 감싸거나, CSS3 속성을 이용해야 하는데 이런 부분은 나중에 다루도록 하겠습니다.

요점 정리
  • margin - 바깥 여백.
  • margin과 margin이 만날 경우, 각 요소의 바깥 여백이 만날 경우 둘 중 큰 여백에 맞춰짐.
  • padding - 안 여백.
  • width, height - 너비와 높이.
  • 박스의 실질적인 전체 너비와 높이는 margin을 제외한 (width 또는 height) + padding + border의 값.
  • 정확한 너비/높이 값을 주기 위해서는 padding과 border를 고려해가며 주어야 함.

이 글이 유용하셨다면 친구들에게 공유 해주세요.