css 內外邊距
阿新 • • 發佈：2018-02-23
width 20px bubuko ctype gpo body 左右 透明 title
一、邊距
內邊距： 邊框於內容之間的距離。
外邊距：邊框於邊框之間的距離。
二、外邊距margin
Margin的特性
margin始終是透明的。
margin通過使用單獨的屬性，可以對上、右、下、左的外邊距進行設置。即：margin-top、margin-right、margin-bottom、margin-left。
外邊距的 margin-width 的值類型有：auto | length | percentage
也可以使用簡寫的外邊距屬性同時改變所有的外邊距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 記憶方式是元素周圍正上方順時針“上右下左”記憶。
並且規範還提供了省略的數值寫法，基本如下：
1、如果margin只有一個值，表示上右下左的margin同為這個值。例如：margin:10px; 就等於 margin:10px 10px 10px 10px;
2、如果 margin 只有兩個值，第一個值表示上下margin值，第二個值為左右margin的值。例如：margin:10px 20px; 就等於 margin:10px 20px 10px 20px;
3、如果margin有三個值，第一個值表示上margin值，第二個值表示左右margin的值，第三個值表示下margin的值。例如：margin:10px 20px 30px; 就等於 margin:10px 20px 30px 20px;
4、如果margin有四個值，那這四個值分別對應上右下左這四個margin值。例如：margin:10px 20px 30px 40px;
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邊距</title>
</head>
<body style="margin: 0 auto">
<div style="height: 80px; border: 1px solid red">
<div style="height: 30px; background-color: #3A5FCD">
hero
</div>
</div>
</body>
</html>
修改最裏面的div的外邊距
三、內邊距
修改內邊距，內容與邊框的距離在改變 
css 內外邊距