CSS 内外边距 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css_margin.css"/>
    </head>
    <body>
        <p class="p1">
            this is a p
        </p>
        
        <div class="div2">
            <p class="p2">
                this is p2
            </p>
        </div>
        
        <div class="div3">
            this is a div
        </div>
    </body>
</html>
.p1{
    width: 300px;
    /* 外边距 四个值 */
    margin-bottom: 100px; 
    /* 水平居中 */
    margin: auto;
    border: 2px solid red;
}
.div2{
    margin-left: 100px;
}
.p2{
    /* 继承外元素 */
    margin-left: inherit;
}
.div3{
    border:  2px solid red;
    /* 内边距 */
    padding: 25px ;
    /* 实际宽度300+25*2 */
    width: 300px;
    /* 保持宽度300不变 */
    box-sizing: border-box;
    
}

 

posted @ 2022-03-02 21:10  lwx_R  阅读(54)  评论(0)    收藏  举报