<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.outer-box{
border: 10px solid black;
height: 400px;
width: 400px;
padding: 10px;/*內邊距*/內邊距不會和margin重疊，但是如果是兩個margin就會重疊，距離按較大的計算
margin: 10px;
box-sizing: border-box;/*border+padding+content*/設施它的盒子距離不會隨着padding和border進行改變
/*box-sizing: content-box;*//*content*/設置它的盒子距離不會隨着padding和border進行改變
/*默認塊級元素；<div> <p>*/
}
.inner-box1{
border: 10px solid red;
height: 100px;
width: 100px;
margin: 10px;
}
.inner-box2{
border: 10px solid red;
height: 100px;
width: 100px;
margin: 30px;
}
</style>
<span style="color:#ff6666;"> 0.默認塊級元素：<div> <p> <table> <span style="display:block">
1.margin: 容器之間的距離
2.padding: 內容與邊框之間的距離
3.box-sizing:border-box / content-box
-border-box：height/width = border + padding + content
-content-box：height/width = content
4.兩個div在同一個地方的margin會重疊，大的覆蓋小的
5.兩個div在同一個地方的margin和padding不會重疊</span>
</head>
<body>
<div class="outer-box">
<div class="inner-box1">
</div>
<div class="inner-box2">
</div>
</div>
</body>
</html>
