其他分享
首页 > 其他分享> > 盒子模型:内外边距

盒子模型:内外边距

作者:互联网

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