CS Box Model Ⅰ

/* CSS Document */

body{
margin:0; "Outer spacing"
width:600px;
BORDER:3PX solid red;
}

div{

Background:silver

width:200px;

height:200px;

min-width:100px;
min-height:100px;
max-width:300px;
max-height:300px;

width:40%; "Priority principle, later set the width of the high will replace the previous setting"

Width:auto;
Height:auto; "Follow font changes"

1. Element inner margin
padding-top:10px; "Top padding, expands element maximum height"
padding-bottom:10px;
padding-left:10px;
padding-right:10px;

padding:10px 20px; "Up/down/around"
padding:10px 20px 30px; "Up/around/down"
padding:10px 20px 30px 40px; "Upper right Bottom left"
2. Outer margin of element
margin-top:10px; "Top margin, no expansion of element maximum height"
margin-bottom:10px;
margin-left:10px;
margin-right:10px;

margin:10px 20px; "Up/down/around"
margin:10px 20px 30px; "Up/around/down"
margin:10px 20px 30px 40px; "Upper right Bottom left"

overflow-y:visible; "Default Condition"
Overflow-y:auto; "Overflow Display scroll bar"
Overflow-y:hidden; "Crop out the overflow section"
Overflow-y:scroll; "Add scroll bar box"

}

CS Box Model Ⅰ