<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Box Model </title>
<style type= "Text/css" >
#bigBox {
width:300px;
height:300px;
Background: #ccc;
padding:10px;
BORDER:2PX Blue Solid;/*margin Property incompatibility problem, plus this border can be resolved */
}
#smallBox {
width:100px;
height:100px;
Background:pink;
margin:10px 20px 30px 40px;/*margin Property incompatibility problem, plus border can solve */
}
body,ul,li{
margin:0;
padding:0;
}
</style>
<body>
<div id= "BigBox" >
<div id= "Smallbox" >
Small box
</div>
</div>
<ul>
<li> because there are default values for internal and external margins for each browser, there are different,</li>
<li> we need to calculate the default internal and external margins for all browsers, starting from zero </li>
<li> in actual development, do not use *{margin:0;padding:0;} Because of low efficiency </li>
<li> what elements are commonly used, and what are the default values of 0</li>
</ul>
</body>
15_CSS box model. html