解决CSS中padding（内边距）margin（外边距）撑大盒子的问题

半秋L

 关注

阅读 102

2023-02-14


在有添加padding（内边距）的样式中添加  box-sizing: border-box;

解决CSS中padding（内边距）margin（外边距）撑大盒子的问题_前端

 如果使用的时margin（外边距）来书写样式，margin是不会包含到盒子的总宽高中的，margin是会在盒子的外侧撑开，如图，黑色盒子中设置了margin-bottom，这时会在盒子外侧出现边距。

解决CSS中padding（内边距）margin（外边距）撑大盒子的问题_内边距_02

 

相关推荐

内边距和外边距（盒子模型）

静悠 109 0 0

CSS之内边距padding

花明 127 0 0

盒子模型的内边距——padding

程序员知识圈 207 0 0

css中详解盒子模型组成部分—内容区，边框，内边距，外边距

TiaNa_na 35 0 0

Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距

左小米z 150 0 0

【CSS】盒子模型外边距 ⑤ ( 模型盒子垂直外边距的合并 - 塌陷 | 相邻模型盒子垂直外边距合并 | 嵌套模型盒子垂直外边距合并 )

夏天的枫_ 63 0 0

【CSS】盒子模型外边距 ① ( 盒子模型外边距设置 | 外边距属性单独设置 | 外边距属性复合写法 )

zibianqu 118 0 0

【CSS】盒子模型内边距 ⑤ ( 内边距不影响盒子模型尺寸的情况 | 不设置宽度或高度为其设置 Padding 内边距时不撑开盒子 )

丹柯yx 125 0 0

css：垂直方向外边距margin塌陷问题及解决

晚安大世界 123 0 0

HarmonyOS实战—组件的外边距和内边距

伊人幽梦 107 0 0

精彩评论（0）

0 0 举报