关于padding，margin，width用百分比表示时以什么为基准

最新推荐文章于 2025-03-14 08:09:05 发布
最新推荐文章于 2025-03-14 08:09:05 发布
阅读量2.2k 收藏 6
点赞数 2
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liyongping94/article/details/78112242
本文详细解释了CSS中padding、margin及width等属性的百分比值如何基于父容器的宽度进行计算，同时阐述了height属性的百分比值如何依据父容器的高度来确定，特别指出当父容器高度为auto时，子元素将如何被浏览器处理。

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

padding,margin,width这些属性的百分比值始终是以父容器的宽度为基准的，

而height是以父容器的高度为基准（若父容器没有设置高度，即height值为auto，

则浏览器会设置子容器的height属性为auto）。

 


liyongping94
关注
padding、margin可以取值为百分比时，基准是哪个
qq_42931285的博客
04-06 228
padding、margin可以取值为百分比时，基准是哪个
CSS2.1SPEC：视觉格式化模型之width属性详解(下)
每天进步一点点
12-30 1547
本文承接CSS2.1SPEC：视觉格式化模型之width属性详解(上)，继续分析CSS视觉格式化模型中width以及相关值的计算问题：
当padding/margin的取值形式为百分比时。。。。。
weixin_34007020的博客
11-09 134
一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！也许你会说，left/right以父元素的width为参照物好理解，但是top/bottom为什么也是以父元素的width为参照物的呢？网上众说纷纭，关键还是看W3C的规范： 利用这个规范，我们可以用来解决移动端的高度自...
padding(盒子模型,基于父级的像素百分比表示）
dixi7825的博客
12-09 238
1 <!-- 2 <body> 3 <div> 4 <img src=""> 5 </div> 6 </body> 7 --> 8 <!--基于父级元素的百分比表示:如果是div,那么他的父级就是body,如果是img,他的父级元素就是div...
html 百分比 是相对什么,css的百分比margin,padding为什么不是相对于父元素的？
weixin_42356844的博客
06-11 396
假设inner把padding–top设为60%，那它的高度就等于上内边距，等于自身宽度的60%(因为它是block，宽度和父级宽度相等)，position设为relative。把section元素的position设为absolute，宽高都是100%。那么它内部的元素内边距和外边距的百分比虽然相对于父级section的宽度，但因为section宽高比已知，可以换算出来。假设我们要实现的h2元素...
为什么padding/margin的百分比单位基于父元素的宽度而不是高度
weixin_43563204的博客
03-11 1621
W3C规范中提出： padding/margin使用%单位是规定基于父元素的宽度的百分比的内外边距。 原因可能为： 父元素的高度往往由子元素来决定，如果改变margin-top比例增加，相应的，父元素高度也会进行适应性增加；此时父元素高度增加的同时，margin-top若以父元素高度为基准，则其实际数值又会发生适应性变化，双向因果会造成循环，所以W3C的规范做出了以上规定。 而至于真正原因是什么，其实不必太纠结，W3C提出了标准，我们按标准进行开发即可。 用途： 实现子元素宽高等比缩放 //子元素，%单位以
margin和padding的%使用
最新发布
03-28
嗯，用户问的是CSS中margin和padding使用百分比时的规则。这个问题看起来不复杂，但里面可能有些细节需要注意。首先，我得确认百分比到底是相对于哪个元素的哪个属性计算的。 记得标准里说过，margin和padding的...
``` <div style=" float: left; width: 50%; height: 500px;background-color: white;border-radius: 10px ;margin-top: 10px "> <div style="width: 5px;height: 25px;background-color: #1f78ff;margin-top: 22px;margin-left: 10px;border-radius: 10px;float: left"> </div> <div style="float: left;margin-left: 10px;margin-top: 20px;font-size: 20px;font-weight: bold"> 今日有效单量：{{ userinfo.today_order || '0' }}单 </div> <div style="float: right;font-size: 14px;color: gray;padding-top: 20px;padding-right: 20px">更新时间：{{ userinfo.nowtime }} <button @click="showdrawer" type="primary" style="color: rgb(64,158,255);background-color: white;border: none">数据表格 ></button> </div> <div style="clear: both"></div> <div style="float: left;margin-left: 8px;margin-top: 10px"> 日期A：<span style="color: rgb(64,158,255);font-weight: bold">{{ this.totalBa }}</span>单 日期B：<span style="color: rgb(64,158,255);font-weight: bold">{{ this.totalAa }}</span>单 升幅： <span style="font-weight: bold">{{ this.totalBa - this.totalAa }}</span>单</div> <div style="clear: both"></div> <div style="float: left;margin-left: 8px;padding-top: 20px"> 对比日期A: </div> <div style="clear: both"></div> <div style="float: left;margin-left: 106px;margin-top: -26px"> <el-date-picker value-format="yyyy-MM-dd" style="width: 140px;" v-model="timeA" type="date" @change="getOrderChart" placeholder="选择日期"> </el-date-picker> </div> <div style="clear: both"></div> <div style="float: left;margin-left: 260px;margin-top: -32px"> 对比日期B: </div> <div style="clear: both"></div> <div style="float: left;margin-left: 360px;margin-top: -36px"> <el-date-picker value-format="yyyy-MM-dd" style="width: 150px;" v-model="timeB" type="date" @change="getOrderChart" placeholder="选择日期"> </el-date-picker> </div> <div style="margin-top: -36px;float: right;margin-right: 150px"> <el-select style="width: 120px" v-model="current_time" placeholder="当前对比" @change="getOrderChart"> <el-option v-for="item in option_time" :label=item.label :value="item.value"> </el-option> </el-select> </div> </div> <div style="clear: both"></div> <div style="background-color: #FFFFFF;float: right;sborder-radius: 10px;margin-top: -29%;width: 30%"> <div style="width: 5px;height: 25px;background-color: #1f78ff;margin-top: 32px;margin-left: 10px;border-radius: 10px;float: left"> </div> <div style="float: left;margin-left: 10px;margin-top: 30px;font-size: 20px;font-weight: bold"> 我的寄件数量 </div> <div style="clear: both"></div> <div style="float: left;margin-top: 20px;font-size: 14px;color: gray;padding-left: 10px"> 更新时间：{{ userinfo.nowtime }} </div> <div style="clear: both"></div> <div ref="chinaMap" style="width: 600px; height: 400px;background-color: white"> </div> <div style="clear: both"></div> <div style="float: right;margin-top:-470px;margin-right: 30px"> <el-radio-group v-model="radio1"> <el-radio-button label="今日"></el-radio-button> <el-radio-button label="昨日"></el-radio-button> <el-radio-button label="本周"></el-radio-button> </el-radio-group> </div> </div>```<div style="margin-top: -36px;float: right;margin-right: 150px"> <el-select style="width: 120px" v-model="current_time" placeholder="当前对比" @change="getOrderChart"> <el-option v-for="item in option_time" :label=item.label :value="item.value"> </el-option> </el-select> </div> <div style="background-color: #FFFFFF;float: right;sborder-radius: 10px;margin-top: -29%;width: 30%">窗口缩小后这俩块地方位置错乱，要求在我的代码基础上改动
03-20
-- 修改margin-right为百分比 --> <el-select style="width: 120px; float: right;" v-model="current_time" placeholder="当前对比" @change="getOrderChart"> ...
css定位的百分比的算法,css定位中的百分比
weixin_29821223的博客
08-03 1459
----转载自自己在牛人部落中的相关文章---在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？一、margin，padding的百分比首先从css的设计意图说起，在浏览器默认的writing-mode: horizontal-tb;和direction: ltr;的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定(仔细回想一下，如果没有显式...
`margin` 或 `padding` 使用百分数，都基于父盒子的宽度
weixin_63681863的博客
09-06 590
margin和padding的百分比计算，无论是水平方向还是垂直方向，都是基于父容器的宽度。
当margin用百分号（%）时，数值是以谁为基准？
weixin_33970449的博客
10-01 703
今天做了一个demo，自己用原生的js写了一个轮播图，那么问题来了，当你用百分号表示margin-left的时候，他取得百分号的数值是以谁做为基准而取得值呢？子元素和父元素的width都是百分号表示， 比如一个很简单的额例子了，当一个div里面有一个div时，下面我就通过2个简单的demo来解释这个问题 1、如果父元素div大于里面的子元素di...
css height width padding margin 百分比取值的基准问题
JiM-W 的博客
01-08 5101
新地址：https://github.com/jimwmg/JiM-Blog 标准流下 一 首先，明确width height padding margin 取值可能的四个值： 可能的值 值 描述 auto 浏览器计算内边距。 length 规定以具体单位计的内...
html盒子模型元素占位高度,利用css属性padding或margin的百分比值实现元素的高度自适应...
weixin_32484897的博客
05-31 934
外边距属性margin和内边距属性padding取百分比值的时候，无论是left、right或top、bottom，都是以其父元素的宽值(width)作为参照物(即分母top/width)，这是W3C的规范，官方原文如下：Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relat...
padding-top、padding-bottom值设置为百分比时，依据的是父级的height吗？
王铁柱666的博客
03-14 196
为百分比时，应该记住这个百分比是基于父元素的宽度，而不是高度。这可能会导致一些意想不到的布局效果，特别是在响应式设计中，所以需要谨慎使用。，百分比也是根据包含块的宽度来计算的。如果包含块的宽度依赖于这个元素本身，那么在CSS 2.1中，最终的布局是未定义的。的百分比值基于父元素的高度，你可能需要使用JavaScript或其他方法来动态计算和设置这些值。这个行为可能初看起来有些反直觉，但它是根据CSS规范来定义的。的值设置为百分比时，这个百分比并不是基于父元素的。这段话的意思是，即使是。
margin/padding-top/bottom 的百分比
CherryTchen的专栏
11-06 636
margin/padding-top/bottom 的百分比之所以按照 width 计算，其实理由很简单，就是要匹配主要的 use cases。那就是——要构建在纵横两个方向上相同的 margin/padding。如果两个百分比的相对方式不同，那用百分比就无法得到垂直和水平一致的留白。 有人也许会问，为什么不是垂 直方向上的 height 而是水平方向的 width？这其实容易理解。因为 C
CSS中百分比是相对于谁的
青山不改，绿水长流。
09-06 1321
相对于自身的宽高值减去背景图片的宽高值所得到的剩余值。因此，属性值"center center"和"50% 50%"是等价的，即如果设置了后者，背景图片会自动居中，不需要像定位那样还要transform偏移。top、height 和 left、width 的百分比是分别根据包含它的第一个不是 static 定位的元素的。width 和 height 的百分比是分别根据父级元素块的。绝对定位的 top、left、width、height。top 和 left 的百分比是分别根据父级元素块的。
基础梳理之padding
来啦(#^.^#)
12-06 711
padding padding 不支持任何形式的负值，设置之后没有效果（和 padding：0效果相同） padding 的百分比值为父元素宽度的百分比（ex：padding: 20% 为父元素宽度的20%应用于该元素的padding值） padding设置后会影响元素的尺寸（实际宽度会变成原元素宽度+padding*2） 如果元素设置了背景颜色的话，会对内联元素有视觉上的影响，对外部元素的尺寸...
css 设置相对高度,css 元素的竖向百分比设定是相对于容器的高度吗？
weixin_36349685的博客
08-03 739
结论是，如果是height的话，是相对于容器高度，如果是padding-height,margin-height则是相对于容器的宽度。举例说明：JS Binheight.wrapper{height: 400px;width:200px;background: #ccc;display: block;}.content{width:100px;height: 50%;background: red...
css margin-top 50%问题
vagabond_的博客
09-28 487
css margin-top 问题记录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值