padding是外边距还是内边距⽹页基础（⼗六）盒⼦模型内外边距
上图为盒⼦模型中内外边距和边框⽰意图
外边距设置：
<!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>
<!--
作者：770267939@qq
时间：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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。