<style>
*{
margin: 0;
padding: 0;
}
.div1
{
width: 100%;
height: 100px;
margin-left: 20px;
margin-right: 20px;
background-color: red;
}
.div2
{
width: auto;
height: 100px;
margin-left: 20px;
margin-right: 20px;
background-color: blue;
}
.div3
{
width: 100%;
height: 100px;
padding-left: 20px;
padding-right: 20px;
background-color: rosybrown;
}
.div4
{
width: auto;
height: 100px;
padding-left: 20px;
padding-right: 20px;
background-color: royalblue;
}
</style>
</head>
<body>
<div class="div1">
margin 是控件的边缘相对于控件父空间的边距
</div>
<div class="div2">
margin 是控件的边缘相对于控件父空间的边距
</div>
<div class="div3">
padding 是控件的内容相对于控件边缘的边距
</div>
<div class="div4">
padding 是控件的内容相对于控件边缘的边距
</div>
<p>可以看到，当取 padding 的时候，width 取 100% 还是 auto 没有区别。
但当取 margin 是，width 取 100% 是被向右挤压，取 width 为 auto 时，是对左右进行剪裁</p>
<script src="js/jq.js"></script>
<script src="js/bootstrap.min.js" async defer></script>
</body>