盒子模型：内外边距
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子模型</title>
</head>
<style type="text/css">
.kk{
width:600px;
height:500px;
border:5px solid blue;
/* padding-top: 50px;
padding-left:50px; */
padding:50px 70px 80px 100px;/* 内边距 */
/* 复合写法:top(上) right(右) bottom(下)
left(左){四个数}
复合写法：上下60px 左右80px{两个数}
复合写法：上1px 左右9px 下9x{三个数}
复合写法：上下左右1px{一个数}*/
/* 加了内边距盒子会被撑大:
横向:width+padding-left+padding-right;
纵向:height+padding-top+padding-bottom; */
margin: 50px 30px 60px 80px ;/* 外边距 */
/* 复合写法:top(上) right(右) bottom(下)
left(左){四个数}
复合写法：上下60px 左右80px{两个数}
复合写法：上1px 左右9px 下9x{三个数}
复合写法：上下左右1px{一个数}*/
/* 左右外边距为auto的时候,盒子水平居中 */
}
.mm{
width:300px;
height:200px;
border:5px dotted red;
}
</style>
<body>
<div class="kk">俺喜欢笑傲红尘
<div class="mm">漏电开关</div>
</div>
</body>
</html>
标签：盒子,模型,50px,复合,padding,1px,80px,外边,写法 来源： https://blog.csdn.net/a123003005/article/details/121074096