css内边距问题，关于使用padding后容器被撑开

Posted 2023-05-07

如题，就是说不用在设置了padding之后对容器的宽、高再进行设置不撑开容器，希望高手帮忙解决一下问题，如果解决了的话还有分数追加

如上图所示，DIV是一个盒模型，padding内边距是计算在整个盒子的大小的。

但是margin是外边距，并不计入DIV的大小。

参考技术A

用box-sizing: border-box;就可以了

w3school上的定义和用法：

div的宽高为200*200，给div加个padding: 20px;，div的宽高为240*240

用了box-sizing: border-box;后的效果

希望能帮到你

参考技术B padding使用后。一个盒子的宽度不变，内边距增加了。所以要想还是原来盒子的大小就必须要把盒子的宽度减掉一些。padding所增加了多少就要剪掉width多少，这样就不会改变容器（盒子）的大小。 参考技术C padding、marginr的宽度是计算在宽度总和里的。比如，
设置div宽度为800px，如果不用padding和margin，可以这么写：
divwidth:800px;

如果用了padding，则需要这么写：
divwidth:750px;padding:0 25px;本回答被提问者采纳

CSS设置元素内边距（padding）外边距（margin）

设置元素内边距padding

所有的 HTML 元素基本都是以矩形为基础。
每个 HTML 元素周围的矩形空间由三个重要的属性来控制：
padding（内边距）
margin（外边距）
border（边框）
padding控制着元素内容与border之间的空隙大小。

我们可以看到蓝色盒子和红色盒子都在黄色盒子里面。
红色盒子比蓝色盒子有着更多的padding填充空间。
当你增加蓝色盒子的padding值，文本内容与边框的距离会逐渐拉大。

设置元素外边距margin

margin（外边距）属性控制元素的边框与其他元素之间的距离。
注意：
①红色盒子的margin值要比蓝色盒子的大，让它看起来比蓝色盒子要小。
②当你增加蓝色的margin值，它会增加元素边框到其他周围元素的距离。

设置元素负外边距

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
注意：如果你设置元素margin为负值，元素会变得更大。

使用padding给元素添加不同的外边距

CSS 允许你使用padding-top，padding-right， padding-bottom和padding-left属性来设置四个不同方向的padding值
不需要每次都要分别声明 padding-top，padding-right，padding-bottom和padding-left属性，也可以把它们汇总在padding属性里面声明，如下：
注意：四值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。

使用margin给元素添加不同的外边距

CSS 允许你使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值。
同样，每个方向的外边距值可以在margin属性里面汇总声明，
来代替分别声明margin-top，margin-right，margin-bottom和margin-left属性的方式：