1.所有的 HTML 元素本質(zhì)上是小的矩形塊寄雀，代表著某一小塊區(qū)域莱坎。
有三個(gè)影響HTML元素布局的重要屬性：padding(內(nèi)邊距)玫氢、margin(外邊距)倔撞、border(邊框)粤策。
元素的 padding 控制元素內(nèi)容 content和元素邊框 border 之間的距離
在這兒，我們可以看到綠方塊和紅方塊都位于黃方塊之中误窖，但是紅方塊比綠方塊具有更大的 padding。
當(dāng)你加大綠方塊的 padding, 它將擴(kuò)大元素內(nèi)容和元素邊框的距離秩贰。
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: red;
padding: 20px;
}
.green-box {
background-color: green;
padding: 10px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
2.元素的外邊距 margin 控制元素邊框 border 和元素實(shí)際所占空間的距離
3.如果你將一個(gè)元素的 margin 設(shè)置為負(fù)值霹俺，元素將會(huì)變大。
4.有時(shí)你想要自定義元素毒费，使它的每一個(gè)邊具有不同的 padding丙唧。
CSS 允許你使用 padding-top、padding-right觅玻、padding-bottom 和 padding-left來控制元素上右下左四個(gè)方向的 padding
<style>
.green-box {
background-color: green;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}
</style>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
5.有時(shí)你想要自定義元素想际，使它的每一個(gè)邊具有不同的 margin培漏。
CSS 允許你使用 margin-top、margin-right胡本、margin-bottom 和 margin-left 來控制元素上右下左四個(gè)方向的 margin牌柄。
<style>
.green-box {
background-color: green;
margin-top: 40px;
margin-left: 40px;
margin-right: 20px;
margin-bottom: 20px;
}
</style>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
6.除了分別指定元素的 padding-top、padding-right侧甫、padding-bottom 和 padding-left 屬性外珊佣，你還可以集中起來指定它們，舉例如下：
padding: 10px 20px 10px 20px;
這四個(gè)值以順時(shí)針方式排列：頂部披粟、右側(cè)咒锻、底部、左側(cè)守屉，簡稱：上右下左
<style>
.red-box {
background-color: red;
padding: 20px 40px 20px 40px;
}
</style>
7.除了分別指定元素的 margin-top惑艇、margin-right、margin-bottom 和 margin-left 屬性外拇泛，你還可以集中起來指定它們滨巴，舉例如下：
margin: 10px 20px 10px 20px;
這四個(gè)值以順時(shí)針方式排列：頂部、右側(cè)碰镜、底部兢卵、左側(cè)，簡稱：上右下左
<style>
.red-box {
background-color: red;
margin: 20px 40px 20px 40px;
}
</style>
