©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Box Model</title>
	<style>
		div {
			width: 320px;
			padding: 10px;
			border: 5px solid maroon;
			margin: 0;
		}
	</style>
</head>

<body>

	<h1>CSS 박스 모델의 전체 크기 계산법</h1>
	<img src="/examples/images/img_flower.png" width="350" height="263" alt="flower">
	<div>
		위 이미지의 너비는 350px입니다.<br>
		이 div 요소의 width 속성값은 320px입니다.<br>
		하지만 좌우 패딩(padding)이 10px로 설정되어 있습니다.<br>
		또한, 좌우 테두리(border)의 너비가 5px로 설정되어 있습니다.<br>
		따라서 이 div 요소의 전체 너비는 320px + 10px + 10px + 5px + 5px = 350px이 됩니다.
	</div>

</body>

</html>