<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内外边距与边框</title>
<style>
.item1{
width: 300px;
height: 200px;
background-color: red;
border-top-style: solid; /*设置顶部边框的样式*/
border-left: 8px solid red; /*设置左边边框的宽度，样式，颜色的简写方式*/
border-bottom: 10px dashed yellow;
margin-top: 80px; /*设置外边距的顶部边距*/
margin-left: 40px;/*设置外边距的左部边距*/
margin-bottom: 30px;/*设置外边距的底部边距*/
margin: 80px 40px 30px;/*设置外边距的简写方式，第一是上边距，第二个是左右边距，第三个是下边距*/
padding-top: 100px;/*设置内边距的顶部距离*/
padding-left: 50px;/*设置内边距的左部距离*/
padding:100px 50px;/*设置内边距的简写方式，第一是上下内边距，第二个是左右内边距*/
}
.item2{
width: 300px;
height: 200px;
background-color: blue;
}
.item_h2{
position: absolute;
color: white;
line-height: 50px;
}
</style>
</head>
<body>
<div class="item1">
<h2 class="item_h2">测试内容</h2>
</div>
<div class="item2">
<h5>总结：margin和padding在日常开发中最常用的两个布局设置间距的两个属性，margin是设置视图之间的外部距离，如果一个视图的marginBottom小于它下面视图marginTop那两视图的间距取较大数；padding是设置视图和它内容之间的内部间距，但如果设置的内边距那视图的大小就会被撑大</h2>
</div>
</body>
</html>