冷知识：反常识的margin-top与padding-top与%，你被坑过吗？

最新推荐文章于 2023-09-20 08:43:26 发布

追逐梦想永不停

最新推荐文章于 2023-09-20 08:43:26 发布

阅读量867

点赞数

分类专栏： 2020.4—— 文章标签： html css html5

本文链接：https://blog.csdn.net/BHSZZY/article/details/107014573

版权

2020.4—— 专栏收录该内容

100 篇文章 2 订阅

订阅专栏

前言

之前本人写页面的时候，发现总是不能达到想要的效果，例如：

<html>
<div style="width:100%;height:100%">
  <div style="width:100%;height:10%">head</div>
  <div style="width:100%;height:60%;margin:10% 0 10% 0;">body</div>
  <div style="width:100%;height:10%">foot</div>
<div>
</html>

本来设想的是占满整个页面的3个div，分别高10%、60%、10%，再加上间隔有两个10%，正好100%。

【PS：<margin:10% 0 10% 0> 等价于 <margin-top:10%; margin-bottom:10%> 】

【为了简便，margin-top与padding-top就采用margin与padding的格式写了】

然而，页面莫名其妙地多出了滚动条，高度超出了100%；（横屏模式下）

本人的微信小程序也用了类似的语句，结果就是foot部分的元素比预期的要高一些，导致底部出现留白（竖屏模式下）

这是怎么回事？今天本人通过测试与百度，终于找到了原因。

结论

重要的话说三遍：

margin无论left还是right还是top还是bottom都是相对于父元素的width的！

是相对于父元素的width的！

父元素的width！

【PS：padding使用%也是相对于父元素的width】

就在现在，网上仍有许多文章认为margin-top使用%是相对于父元素的height，但并不是这样，只要自己试试就知道了；

由于"width:10%"相对于父元素的width，"height:10%"相对于父元素的height，

导致人们惯性地认为，

"margin-left:10%"相对于父元素的width，"margin-top:10%"相对于父元素的height(我开始也是这么想的)，

然后就被坑了！

不得不说margin和padding相对于父元素的width这个设定真的很迷，但是我们改变不了语言，只能适应语言了。

解决方法

为了实现页面效果，可以将前言中的代码块修改为：

<html>
<div style="width:100%;height:100%">
  <div style="width:100%;height:10%">head</div>
  <div style="width:100%;height:10%"></div>
  <div style="width:100%;height:60%;">body</div>
  <div style="width:100%;height:10%"></div>
  <div style="width:100%;height:10%">foot</div>
<div>
</html>

由于margin不太好用，因此可以使用空白div代替间隔，这样就实现了3个div占满整个页面的效果了，分别高10%、60%、10%，还有两个间隔10%，加起来正好100%。

目前，margin与padding使用%都是相对于父元素width的，如果将来语法改变了，本文也就过时了，还请大家留言给本人，本人会修改或删除此文，谢谢！

2020.6.29

追逐梦想永不停

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
冷知识：反常识的margin-top与padding-top与%，你被坑过吗？

前言之前本人写页面的时候，发现总是不能达到想要的效果，例如：<html><div style="width:100%;height:100%"> <div style="width:100%;height:10%">head</div> <div style="width:100%;height:60%;margin:10% 0 10% 0;">body</div> <div style="width:10
复制链接

扫一扫