<!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>