padding和margin设置百分比

https://www.jianshu.com/p/d6d080e7267f?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=weixin-friends

总结:

一、块级子元素的padding、margin的百分比取值都是相对于父元素的内容区域宽度来计算的,无论是padding-top/left。如果设置了padding和border,也是根据父元素实际的内容区域计算的。

二、

1、inline元素设置padding/margin-left/right生效,但padding/margin-top/bottom不生效;inline元素的高度由字体和行高决定。
2、inline元素的background区域 = content区域 + padding区域。
3、inline元素的padding、margin的百分比取值也是相对于父元素的内容区域宽度来计算的。


### CSS Padding Margin 的区别及用法 #### 一、基本定义 Padding Margin 都是用来控制元素周围空间的属性,但它们的作用范围不同。 - **Margin** 控制的是元素与其他外部元素之间的距离[^1]。它是透明的,位于边框之外的空间。 - **Padding** 则是指定内容与其边框之间的间距。它会影响背景颜色或图像的应用。 #### 二、视觉效果差异 当应用 background-color 或其他背景样式时,padding 的部分会被背景覆盖,而 margin 不会受到影响[^2]。这意味着如果希望增加内部可读性并保持一致的背景色,应调整 padding 而不是 margin。 #### 三、取值方式 两者支持类似的值设定方法,包括具体的长度单位(px, cm 等),百分比形式以及特殊关键字(auto)[^3]。值得注意的是,当使用百分比作为 paddingmargin 的值时,这些百分比始终基于父级容器宽度计算得出,即使是在垂直方向上也是如此[^4]。 #### 四、多值语法解析 对于简化书写风格,CSS 提供了一种通过单一声明即可设置四面 (top/right/bottom/left) 边距的方法: - 使用单个数值表示所有四个方向都采用相同大小; - 双数则分别应用于上下/左右两侧; - 若提供三个参数,则第一个影响顶部,第二组管左右侧,最后一个专指底部; - 完整表达需给出全部四个方位的具体尺寸[^3]。 以下是几个例子展示这种灵活性: ```css /* 设置统一外边距 */ margin: 10px; /* 上下各10px,左右均为5px */ margin: 10px 5px; /* 上方10px,右侧与左侧皆为5px,下方设成15px */ margin: 10px 5px 15px; ``` 同样的规则也适用于 `padding` 属性。 #### 五、特殊情况说明 - **负值处理**:虽然标准建议避免使用负 margins 来构建布局逻辑,但在某些场景下确实可行且有效果,例如制造重叠效果或者修正浮动引起的间隙问题[^2]。 - **自动调整行为**:利用 auto 关键字可以让浏览器自行决定合适的 margin 数值,在居中定位等方面特别有用[^3]。 --- ### 示例代码片段 下面是一个简单的 HTML 结构配合不同的 padding margin 应用来观察其表现的例子: ```html <div style="width: 200px; height: 100px; border: solid black;"> <p style="background-color: lightblue; padding: 20px;">This has padding.</p> </div> <br /> <div style="width: 200px; height: 100px; border: dashed red;"> <p style="background-color: yellowgreen; margin: 20px;">This uses margin instead of padding.</p> </div> ``` 上述案例清晰展示了两者的功能边界及其对外观的影响差别。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值