div,margin,padding

最新推荐文章于 2023-06-28 12:31:50 发布

weixin_34279579

最新推荐文章于 2023-06-28 12:31:50 发布

阅读量130

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/thiaoqueen/p/6870341.html

版权

<!-- 类比礼品盒里装方块月饼。月饼的食用部分（我们把它称之为月饼肉身）要装在小包装盒里，月饼肉身即为content。月饼肉身与直接包裹它的小包装盒（我们把它叫做月饼的衣服）之间的距离叫padding。其中月饼的衣服厚度叫border。月饼的衣服与月饼礼品盒之间的距离叫margin。-->
<!-- css中的width和height指的是content的宽度和高度 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
    <head>    
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />    
        <style type="text/css">    
            body{    
                margin:0px;    
            }    
    
            .test1{    
                width:150px;    
                height:150px;    
                border:6px solid red;    
            }    
    
            .test2{    
                margin-top:40px;    
                padding-top:40px;    
                width:150px;    
                height:150px;    
                border:6px solid gray;    
            }    
    
            .test2_son{    
                width:80px;    
                height:50px;    
                border:12px solid blue;    
            }    
        </style>    
    </head>    
    <body>    
        <div class="test1">test1</div>    
        <div class="test2">    
            <div class="test2_son">test2_son</div>    
        </div>    
    </body>    
</html>

test1

test2_son

转载于:https://www.cnblogs.com/thiaoqueen/p/6870341.html

weixin_34279579

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div,margin,padding

<!-- css中的width和height指的是content的宽度和高度 --&g...
复制链接

扫一扫