div盒子大小总结

最新推荐文章于 2024-10-10 17:36:40 发布

雙安

最新推荐文章于 2024-10-10 17:36:40 发布

阅读量1.2k

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/xiongwanfeng/article/details/74906380

版权

HTML/CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一个盒子有：margin, border, padding.实占多少空间？
竖直方向：margin-top + margin-bottom + border-top + border-bottom + padding-top + padding-bottom

水平方向：margin-left + margin-right + border-left + border-right + padding-left + padding-right

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒模型大小总结</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            background: gray;
            border: 50px solid blue;
            padding: 50px;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        一个盒子有：margin, border, padding.实占多少空间？<br/>
        竖直方向：margin-top + margin-bottom + border-top + border-bottom + padding-top +    padding-bottom<br/>
        水平方向：margin-left + margin-right + border-left + border-right + padding-left + padding-right<br/>
    </div>
</body>
</html>