margin-top百分比问题

最新推荐文章于 2025-04-15 09:59:53 发布
转载 最新推荐文章于 2025-04-15 09:59:53 发布 · 304 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/huancheng/p/8820827.html

本文主要介绍了CSS中margin-top和margin-bottom使用百分比时的计算方式，解释了这些百分比值是依据容器元素的宽度而非高度进行计算的原理。同时，文章也提到了padding属性在设置为百分比时遵循相同规则。

 （1）其实margin-top和margin-bottom的百分比，一般是按容器元素的宽度而不是高度来计算的，padding同理。

 

 

 

 

                     

 

转载于:https://www.cnblogs.com/huancheng/p/8820827.html

CSS中的margin-top属性是用来设置元素顶部外边距的
DbjrClojure的博客
10-02 872
需要注意的是，margin-top属性只会影响元素顶部的外边距，如果需要同时控制元素的上、右、下、左四个方向的外边距，可以使用margin属性或分别设置margin-top、margin-right、margin-bottom和margin-left属性。外边距是指元素与相邻元素之间的空间，通过设置margin-top属性，可以控制元素顶部与上方元素之间的间距。上述代码中，分别按顺序设置了上、右、下、左四个方向的外边距值，可以通过调整这四个值的顺序和大小来控制元素的外边距。希望以上解释对您有所帮助！
CSS margin-top 属性
shengyin714959的博客
09-15 212
margin-top属性设置元素的上部边距。负值是允许的。默认值：0继承：no版本：CSS1object。
定位中margin-top和top设为百分比的参照物
MiemieWan的博客
07-08 842
1.relative top:根据自身高度计算。 margin-top：根据自身宽度计算。 div { width: 400px; height: 600px; position: relative; top: 10%; /* 60px */ margin-top:10%; /* 40px */ } 2.absolute top:根据上游非static元素高度计算。 margin-top：根据上游非static元素宽度计算。 <!DOCT.
margin-top参考点与百分数计算
前端小愤青
08-10 3216
版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.youkuaiyun.com/qq_37674616/article/details/81568944 下面是追溯过程： 1.关于外边框基准问题（参照点） 下面我们来分析几个案例: 案例的代码大致如下: ...
前端面试题：当margin-top、padding-top 的值是百分比时,分别是如何计算的?
sdasadasds的博客
07-28 823
我们认为，正常流中的大多数元素都会足够高于包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。陆荣涛前端学习交流Q群858752519。...
给元素的margin-top/top设置百分比，是基于什么进行计算？
weixin_57208584的博客
07-09 336
宽度。
margin-top/bottom，padding-top/bottom百分比取值的问题
九日的博客
10-12 1144
一、 1.margin-top/bottom，padding-top/bottom设置为百分比时，取值为父元素宽度的百分比。 2.如果想要取父元素高度的百分比，在父元素上添加代码： writing-mode: vertical-lr; 二、 关于为什么为W3C规定，margin和padding的取值是按照width来计算。 主要有两种说法， 1.避免高度计算的循环依赖； 2.统一基准 1.关于第一种说法： （1）当父元素高度不固定，需要依靠子元素撑开时，计算父元素高度时回去寻找子元素高度与子元素的ma.
scroll-margin-top css
01-11
通过给目标元素添加合适的 `scroll-margin-top` 可以有效解决问题: ```html <!-- HTML --> 前往章节 ... 这是标题 <!-- 更多内容... --> <!-- CSS --> #section h2 { /* 设置距离顶部的安全间距 */ scroll-...
style="margin-top: 3%"和style="padding-top: 3%"的区别
最新发布
09-02
- 引用[1]讨论margin-top百分比基于父宽度。 - 引用[2]提到替代方案用flex。 - 引用[4]显示反常识效果，可能导致布局问题。 - 引用[5]使用负margin和padding解决兼容性。 我的回答需要： - 使用中文。 - 结构清晰，...
CSS篇：彻底搞懂CSS百分比边距：margin-top和padding-top的计算原理
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
04-15 1437
理解CSS百分比边距的计算原理，可以帮助我们避免很多布局上的困惑，也能让我们更精准地控制页面元素的空间关系。记住这个简单的规则：在CSS中，垂直方向的百分比边距（margin/padding-top/bottom）都是基于包含块的宽度计算的。
margin设置百分比
qq_35134066的博客
01-23 4079
margin设置百分比是基于父容器的宽度，所以无论是margin-top还是margin-bottom都是基于父容器的宽度。 看如下示例： &lt;style&gt; .fu { width: 400px; height: 300px; background: blue; overflow: hidden; } ...
magin，padding百分比。定位top，left百分比总结
qq_38340907的博客
10-11 954
1、margin-top，bottom，left，right 百分比，都是相对的是父元素的宽度。 假设父元素的宽1000px，给子元素设置margin-top: 10%， 就是 1000px * 10% = 100px。 当然padding四个值也是相对于父元素的宽度进行计算的。 2、定位的元素，边偏移百分比 left，right百分比相对于的是带有定位的父级元素的宽度。 top，bottom百分...
css 子元素margin-top为百分比时的问题
lqx_sunhan的博客
04-14 1368
如题,如果子元素的margin-top是百分比，是以父元素的宽度为基准进行计算的，而不是高度哦。 <div style="width:1000px; height:100px; background-color: red;"> <table></table> <div style="width:500px; height:500px; background-co
padding和margin设置百分比
chiuwingyan的博客
02-27 1322
https://www.jianshu.com/p/d6d080e7267f?utm_campaign=hugo&amp;utm_medium=reader_share&amp;utm_content=note&amp;utm_source=weixin-friends总结：一、块级子元素的padding、margin的百分比取值都是相对于父元素的内容区域宽度来计算的，无论是padding-top...
css【详解】外边距 margin（含margin百分比值，margin负值，margin合并，margin：auto，margin失效）
朝阳39的博客
03-23 5321
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2.父级和第一个/最后一个子元素 阻止margin-top合并的方法 阻止margin-bottom合并的方法 3.空块级元素的margin合并 阻止空div元素的margin合并 margin合并的计算规则 margin合并的重要意义 margin:auto的填充规则 margin失效的场景 margin属性的值为百分比值时，无论是水平方向还是垂直方向，都是相对宽度计算的 margin合并的场景 ...
关于padding和margin的百分比
front end workhorse zuo
06-09 689
最近随手习惯性的写了个样式margin-top: 10%; 本意是想它里上面的高度是现有父节点高度的10%，但事实并非如此。它离上面的高度始终是比预期的多出许多，才着重的研究起来这个属性的具体算法。经过各种尝试，发现这个百分比是针对的父元素的宽度，并不是高度，知道真相的我大吃一惊，所以再捋了捋。 首先在dom元素的高度，大部分都是没有指定的，所以它真正的高度是由里面的内容撑起来的，也就没有所谓高度的概念，另外高度的这个属性也是不会自动继承的，除非你给它设定继承才会。所以高度这东西的不确定性太多，不太方便用
margin-top的值为%,是相对于谁的百分比
abc589721的博客
01-22 2229
以前一直用margin-top:50%,transform:translateY(-50%)来实现垂直居中，但是今天在自己做banner的上下切换按钮的垂直居中的时候才发现，margin-top的%值是相对于父元素的宽度的。 也可以改变布局：writing-mode:vertical-rl;为纵向排列,那么相对的百分比就是相对于高度了。 用top：50%，配合transform:tr...
html5中top什么意思,margin-top在html中的意思是什么
weixin_42340136的博客
07-09 3671
在html中margin-top的意思为“上边距”，是用于设置元素的上部边距的一个css属性；其语法格式为“margin-top:auto|length|%;”，允许设置负值。本教程操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。CSS margin-top 属性margin-top属性设置元素的上部边距。注意： 负值是允许的。语法:margin-to...
margin-top、padding-top的值为百分比
热门推荐
yangxy的博客
05-22 1万+
问题：当margin-top、padding-top的值是百分比时，分别是如何计算的？ A 相对父级元素的height，相对自身的height B 相对最近父级块级元素的height，相对自身的height C 相对父级元素的width，相对自身的width D 相对最近父级块级元素的width，相对最近父级块级元素的width答案：D可以对元素的margin设置百分数，百分数是相对于父元
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值