這兩項是CSS中很常會設定到的屬性，而他是用來幹嘛的呢?
margin:和外面四周間距。
首先我們建立兩個長寬各100px，顏色是紅色的方塊。
<style>
div{
width: 100px;
height: 100px;
background-color:red ;
}
</style>
<body>
<div>
</div>
<div>
</div>
</body>
這時候我們發現雖然是兩個方塊，但是他們之間黏在一起，所以看起來像一個長方形，這時候我們就可以利用margin分開他們。在style裡添加這行
margin: 10px;
這時候就會發現它們中間有了10px的距離，但其實不只有中間，而是離左邊、右邊、下面都有了10px的距離。因為margin沒有改變屬性時，預設就是四個方位(上、下、左、右)都增加你所設定的單位距離。當然你也可以透過單一去調整。
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
你也可以透過這樣調整!兩種方式都會的話十分方便喔，如果你還是不太懂，可以看看這張圖。
padding:和裡面四邊間距。
首先我們建立一個長寬各250px的方塊，裡面有文字內容。
<style>
div{
width: 250px;
height: 250px;
background-color:red ;
}
</style>
<body>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est cum amet voluptatibus molestiae enim aut consequatur facilis deleniti provident accusamus aliquam temporibus officia impedit qui perspiciatis, distinctio ex quod repellendus. Hic laborum fugit delectus atque, dolor voluptatum odio quas quos, asperiores doloremque, maiores dolores nulla labore exercitationem nesciunt iusto autem culpa. Beatae quia asperiores vel minus! Fugit neque enim et?</p>
</div>
</body>
結果會長這樣，但不覺得文字跟旁邊的方框很擠嗎，這時候我們就要使用padding。
padding: 50px;
這時候看起來是不是就舒服多了呢!但要注意一點，你在設定寬高的時候，因為你設定了padding:50px ，所以你原本設定的250px的方框，也會因為你加的padding而增加寬高，左右上下各增加50px。變成寬高350的一個方框。
另外，padding也如同margin，可以對單一方向做調整。
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
iThome鐵人賽
看影片追技術