exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
#bar {
width:200px;
border:1px solid red;
margin-bottom:5px;
}
/*width라는 속성은 테그 자체 너비가 아니라 컨텐츠의 너비와 높이이다.*/
/*width는 태그 전체 크기가 아닌 내용물의 크기다 실제 크기는 202px이다. width 200px border의 1px 양끝 1+1 2px이 된다. */
#box {
width:200px;
height:100px;
border:1px solid blue;
padding:20px;
}
</style>
</head>
<body>
<!-- Ex24_size.htm -->
<div id="bar"></div>
<div id="box">내용물</div>
</body>
</html>
결과
