盒子模型中边框，内边距，外边距对盒子大小的影响

最新推荐文章于 2022-12-30 11:47:23 发布

小许不吃芝麻酱

最新推荐文章于 2022-12-30 11:47:23 发布

阅读量2k

点赞数 4

分类专栏：前端文章标签： css html5 前端

本文链接：https://blog.csdn.net/weixin_46026668/article/details/121042899

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

盒子模型中border，padding，margin对盒子大小的影响。

border是盒子的边框；padding是盒子的内边距；margin是盒子的外边距。

以下边一个例子来解释：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型问题</title>
    <style>
        .a {
            margin: 0 auto;
            width: 600px;
            height: 600px;
            background-color: red;
        }
        
        .b {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        
        .c {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>

</html>

运行结果如下：

两个子盒子的高度刚好充满父盒子的高度。此时盒子大小为600Ｘ600，我们给大盒子加上一个10像素黑色边框则有：

此时盒子的上下左右都会各加10像素，盒子实际大小会改变，想要解决这个问题我们可以：

测量盒子大小时不量边框；
如果测量时包含了边框，则需要width／height减去边框宽度。

我们再给盒子增加一个像素为10的内边距，看看结果如何：

结果盒子大小会增加，所以我们在写盒子大小时为了保证盒子跟效果图保持一致，则让width／height减去多出来的内边距大小即可。

我们再给两个子盒子各增加一个10像素的外边距；

此时两个子盒子会有一部分多出大盒子，所以我们可以提前加上盒子的外边距，防止这种情况发生。

最后附上小编的代码希望可以帮助你：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型问题</title>
    <style>
        .a {
            margin: 0 auto;
            width: 600px;
            height: 600px;
            background-color: red;
            /* 给大盒子设置一个外边框防止小盒子增加外边距时产生塌陷问题（内边距和外边框问题时可以屏蔽掉） */
            border: 1px solid rgba(0, 0, 0, 0.1);
            /* padding: 10px; */
        }
        
        .b {
            width: 300px;
            height: 300px;
            background-color: blue;
            margin: 10px;
        }
        
        .c {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>

</html>

小许不吃芝麻酱

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子模型中边框，内边距，外边距对盒子大小的影响

盒子模型中border，padding，margin对盒子大小的影响。border是盒子的边框；padding是盒子的内边距；margin是盒子的外边距。以下边一个例子来解释：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
复制链接

扫一扫