• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 User Interface</title>
7
    <style>
8
        div {
9
            width: 350px;
10
            height: 100px;
11
            margin: 10px;
12
        }
13
        #origin { border: 1px solid orange; }
14
        #no_border_box {
15
            border: 10px solid green;
16
            padding: 20px;
17
        }
18
        #border_box {
19
            border: 10px solid yellow;
20
            padding: 20px;
21
            box-sizing: border-box;
22
        }
23
    </style>
24
</head>
25
​
26
<body>
27
​
28
    <h1>box-sizing 속성을 이용한 크기 설정</h1>
29
    <div id="origin">원래 div 요소의 크기에요!</div>
30
    <div id="no_border_box">이 요소는 설정한 패딩과 테두리의 너비만큼 크기가 늘어났어요!</div>
31
    <div id="border_box">이 요소는 설정한 패딩과 테두리의 너비에 상관없이 크기가 똑같아요!</div>
32
​
33
</body>
34
​
35
</html>