上图为盒子模型中内外边距和边框示意图
外边距设置：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外边距</title>
<<!--
外边距 margin
margin-top 上外边距
margin-right
margin-bottom 下外边距
margin-left
margin属性可以给margin的四个值子属性进行简写
注意：设置了四个属性值时，按照顺时针方向也就是上右下左
margin 3px 5px; 上下为3像素 左右为5像素
margin 3px 5px 7px; 上为3像素 左右为5像素 下为7像素
margin 9px 上下左右全是9像素
margin 0px auto 上下为0像素 左右根据窗口边距左右居中
-->
<style>
.margin{
margin-top: 30px;
margin-right: 10px;
margin-bottom: 40px;
margin-left: 60px;
}
.automargin{
/*用盒子居中必须加宽度*/
width: 500px;
margin: 0px auto;
}
</style>
</head>
<body>
<div>没有设置外边距的显示效果</div>
<div class="margin">外边距设置</div>
<div class="automargin">设置位置水平居中的段落</div>
</body>
</html>
内边距设置效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内边距</title>
<!--
作者：[email protected]
时间：2020-03-02
描述：padding 内边距
-->
<style>
/*尽量少使用内边距 因为padding可改变盒子的大小 尽量使用margin*/
.padding{
padding: 30px 50px;
}
</style>
</head>
<body>
<table border="1" width="200px">
<tr>
<td>没有填充效果</td>
</tr>
<tr>
<td class="padding"><span>填充效果</span></td>
</tr>
</table>
</body>
</html>
