HTML 문서의 모든 요소는 브라우저에서 직사각형 상자로 렌더링됩니다. 너비, 높이, 패딩 및 여백은 요소 주변에 할당된 공간을 결정합니다. 다음 다이어그램은 상자 모델 개념을 보여줍니다. -
출처:w3.org
콘텐츠
여기에는 텍스트, 이미지 또는 기타 미디어 콘텐츠 형태의 실제 데이터가 포함됩니다. 너비 및 높이 속성은 이 상자의 크기를 수정합니다.
패딩
콘텐츠의 바깥쪽 가장자리와 테두리 사이의 공간은 패딩을 나타냅니다. 이 상자는 padding 속성으로 크기를 조정할 수 있습니다. padding-left, padding-bottom 등과 같은 가장자리별 속성은 맞춤 간격을 달성하는 데 도움이 됩니다.
테두리
패딩의 바깥쪽 가장자리와 여백의 안쪽 가장자리 사이의 거리는 요소의 테두리를 정의합니다. 기본적으로 너비는 0으로 설정되어 있습니다. border 속성은 요소의 테두리를 정의하는 데 사용됩니다. 개별 가장자리도 스타일을 지정할 수 있습니다.
여백
요소의 상자와 주변 요소의 상자 사이의 공간은 여백으로 정의됩니다. 이는 페이지 가장자리와 콘텐츠 사이의 공간으로 정의되는 페이지 여백과 유사합니다. 색상이 투명하여 요소 테두리 외부 영역을 지우는 것을 제외하고 패딩 속성을 시뮬레이션합니다. 패딩과 마찬가지로 개별 가장자리를 사용자 정의 여백을 갖도록 정의할 수 있습니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
body * {
outline: solid;
}
#demo {
margin: auto;
width: 50%;
padding: 1em;
border: 1px outset;
display: flex;
box-shadow: inset 0 0 15px mediumvioletred;
box-sizing: border-box;
}
#demo div {
padding: 2em;
box-shadow: inset 0 0 9px orange;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html> 출력
이것은 다음과 같은 출력을 제공합니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
body * {
outline: thin dotted;
}
#demo {
margin: auto;
width: 120px;
height: 120px;
padding: 1em;
border: 1px outset;
display: flex;
box-shadow: inset 0 0 15px indianred;
}
#demo div {
width: 40px;
height: 40px;
}
div:nth-child(odd) {
border: inset lightgreen;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
}
div:nth-child(even) {
border: inset lightblue;
padding: 0.5em;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html> 출력
이것은 다음과 같은 출력을 제공합니다 -
