加padding之后盒子会被撑大的解决办法

原创于 2020-09-13 10:43:19 发布 · 7.3k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5 #css3

css 专栏收录该内容

32 篇文章

订阅专栏

本文探讨了在CSS布局中，当为元素添加padding后，盒子尺寸变大的现象及其解决方案。通过使用box-sizing属性设置为border-box，可以有效避免盒子因padding而被撑大，保持原有布局不变。

加padding之后盒子会被撑大的解决办法

盒子代码:

       div{
            margin:0 auto;
            margin-top:400px;
            width:100px;
            height:100px;
            text-align: center;
            border:2px solid black;
        }
    </style>

</head>
<body>
 <div>我是内容</div>

运行示例
在这里插入图片描述

这是正常的页面然后我们给内容部分加个padding:10px;
效果如下：
在这里插入图片描述
我们可以看到现在盒子宽度是：100+两个padding+两个border=124px;
同理宽度是：100+两个padding+两个border=124px;

很明显的盒子被撑大了

然后我们加入如下代码

box-sizing: border-box;

我们再看下运行截图：
在这里插入图片描述
我们看到浏览器自动计算了内容的宽高从而保持原有的高度和宽度

加padding之后盒子会被撑大的解决办法

加padding之后盒子会被撑大的解决办法

很明显的 盒子被撑大了

很明显的盒子被撑大了