padding,margin百分比 详解及内外边距问题

本文探讨了CSS中padding-top和padding-bottom以百分比设置时,高度如何计算,以及外边距合并和外边距塌陷现象。重点讲解了内外边距百分比是相对于父元素width计算,并举例说明外边距合并导致的问题和解决方法,如使用BFC避免外边距塌陷。

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

今天早晨被同时问及一个面试的题;说一个盒子给定宽度为500px,而padding-top为20%,则盒子的高度是多少,瞬间蒙了:然后去测试了下,正好今天离职没啥事认真研究下边距问题

首先说一下padding-top,padding-bottom,margin-top,margin-bottom为百分比时是相对与父元素的

w3school规定

内边距的百分比数值

前面提到过,可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。

下面这条规则把段落的内边距设置为父元素 width 的 10%:

p {padding: 10%;}

还可以为 margin 设置一个百分比数值:

p {margin : 10%;}

百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

说到外边距边距会出现边距塌陷问题:同时引用w3school中的例子

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并

外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。

简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:

CSS 外边距合并实例 1

以及给子元素一个margin-top时会出现塌陷到父元素

外边距塌陷问题使父元素为BFC(块级格式化上下文)

把父级元素设置成块级格式化上下问的方法是:

1、float值不为none

2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

inline-black在不设置宽度的情况下默认不继承父元素的宽度,而black在不设置宽度的情况下默认继承父元素的宽度

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值