[CSS] 박스모델(Box Model)의 구조 이해하기

텍스트 문장이나 이미지 등의 콘텐츠 내용이 표시되는 영역과 그 주변을 패딩(padding), 보더(border), 마진(margin) 등 4 개 영역으로 구성되어 있는, 네모난 박스(BOX)에 대하여 그 구조를 이해하고, 각 영역에 대해 설명하겠습니다.

박스모델(Box Model)의 구조

일반 텍스트 문장이나 이미지 등으로 홈페이지를 만들 때는, 아래 그림과 같이 기본 하나의 박스는 4 개의 영역으로 구성되어 있습니다.

스폰서 링크

컨텐츠 내용을 표시하는 영역
텍스트와 이미지 등의 컨테츠 내용이 표시되는 영역입니다. 폭(width)과 높이(height)로 크기를 지정할 수 있습니다. background 속성을 지정하는 경우 내용 영역과 패딩에 배경이 표시됩니다. width:550px; height:200px;

패딩(padding)
컨텐츠 내용과 보더(Border) 사이의 여백을 말합니다. 배경이나 보더가 일정한 거리를 유지하도록 설정합니다. 마이너스 값의 지정도 가능합니다. 패딩 부분에 배경이 표시됩니다. padding: 5px 5px 5px 5px; padding-top:5px; padding-bottom:5px;

보더 (border)
패딩과 마진의 경계에 있는 테두리선으로, 박스의 외각이 되는 부분입니다. 보더의 두께와 선 색상 등을 설정할 수 있습니다. 배경이 표시되는 영역이지만, 보더가 지정되어 있는 경우에는 보더가 우선 표시됩니다. 패딩(Padding)처럼 사방을 일괄 지정할 수도 있습니다. border:1px solid #000;

마진(margin)
보더와 다른 요소 사이의 여백입니다. 여기에 배경은 표시되지 않습니다. margin: 5px 4px 4px 5px; margin-left:5px; margin-right:5px

박스 모델(Box Model) SAPLE

<head>
<style>
  div.box {
    width:100%;
	border: 1px solid #fa09a2;
	border-radius:3px;
    padding: 10px 5px 5px 45px;
    margin: 5px 0;
  }
</style>
</head>
<body>
<div class="box-sample">SAMPLE</div>
</body>

SAMPLE

스폰서 링크