盒子模型：内外边距

2024-04-06 18:30:44

<!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>

码农公寓

相关文章