课时133.margintop失效原因（理解）

aoai0959

于 2018-06-15 18:11:00 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luckyshuangshuang/p/9188538.html

本文探讨了当子元素设置margin-top而父元素未设置边框时，导致的布局问题及解决办法。通过给父元素添加边框，避免子元素浮动引起的布局错位。深入解析了div元素在不同边框设置下的显示效果，以及如何正确测量文本高度。

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

我们之前讲过如果只有子元素设置了margin top而父元素没有边框则会跟着被顶下来的。

而我们怎么解决这个问题呢？

就是给父元素设置一个边框

而为什么我们在第二个浮动的盒子设置边框没有用呢？应为第一个盒子浮动了以后，第二个盒子前面就没有元素了，就默认是body父元素了，所以我们如果不给父元素设置边框就会被顶下来。

而我们给body设置边框仅仅是为了演示一下这个现象，因为在企业开发中我们没有人会给body设置边框的。

给body添加一个边框以后，再给div2添加边框发现设置10px没有效果

然后我们又给它设置18px，发现还是没有效果

为什么没有效果呢?

因为div2会把div1给覆盖了，所以设置了22px也看不到

我们怎么知道文字有多高呢？

发现文字的默认高度是100*22，所以文字的高度是22

所以我们只要设置了大于22就可以看出来了

转载于:https://www.cnblogs.com/luckyshuangshuang/p/9188538.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。