css的一些小坑

最新推荐文章于 2025-04-27 09:30:00 发布

原创最新推荐文章于 2025-04-27 09:30:00 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了CSS中父元素首个子元素的margin-top特殊行为及其解决方案，通过设置父元素的border或padding来避免margin穿透问题。同时，讨论了使用absolute定位时width:100%继承父元素padding的现象，并提供了两种解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。

2.absolute之后width：100%会继承父元素的padding，可以再嵌套一层解决或者left0；right0