• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Box Model</title>
7
    <style>
8
        div {
9
            width: 320px;
10
            padding: 10px;
11
            border: 5px solid maroon;
12
            margin: 0;
13
        }
14
    </style>
15
</head>
16
​
17
<body>
18
​
19
    <h1>CSS 박스 모델의 전체 크기 계산법</h1>
20
    <img src="/examples/images/img_flower.png" width="350" height="263" alt="flower">
21
    <div>
22
        위 이미지의 너비는 350px입니다.<br>
23
        이 div 요소의 width 속성값은 320px입니다.<br>
24
        하지만 좌우 패딩(padding)이 10px로 설정되어 있습니다.<br>
25
        또한, 좌우 테두리(border)의 너비가 5px로 설정되어 있습니다.<br>
26
        따라서 이 div 요소의 전체 너비는 320px + 10px + 10px + 5px + 5px = 350px이 됩니다.
27
    </div>
28
​
29
</body>
30
​
31
</html>