css中的padding margin

已于 2022-03-09 22:24:19 修改
阅读量276 收藏
点赞数 1
分类专栏： css 文章标签： css css3 前端
于 2022-03-08 23:11:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47300795/article/details/123365655
版权
padding

padding：块级元素内边距
如果padding设置为百分比，则padding的值取自于哪里？？？
如果父级元素有宽度和高度，则padding的百分比取自于宽度的值，如果父级元素没有设置宽度值，则一直往上取，直到取到当前页面的宽度
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如上所示，padding的50%是取得父元素宽度的值

margin

margin：块级元素的外边距 ，和padding一样，如果使用百分比来定义margin的大小，取的值为父级元素的宽度值，且父级元素必须为块级元素，如下图所示：
在这里插入图片描述

仅记录平常学习

(σﾟ∀ﾟ)σ..:*☆哎哟不错哦
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中margin和padding的区别浅析
09-24
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。下面讲解 padding和margin常用的用法
margin/padding百分比值的计算
weixin_33950035的博客
08-31 411
1、百分比介绍 一般元素的宽度用百分比值表示时，元素的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置该样式，使其子元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。 margin-right/margin-left的百分比值是...
margin设置百分比
qq_35134066的博客
01-23 3918
margin设置百分比是基于父容器的宽度，所以无论是margin-top还是margin-bottom都是基于父容器的宽度。 看如下示例： <style> .fu { width: 400px; height: 300px; background: blue; overflow: hidden; } ...
利用padding-top/padding-bottom百分比，进行占位和高度自适应
最新发布
literarygirl的博客
03-28 169
但是有一个问题，假如我们想要设置max-width的话，在上面样式的基础上，为.item添加max-width 是不起作用的，原因max-width只有在内容撑开高度的时候才起作用，而.item并不是被内容撑开的，为了解决这个问题，还可以使用伪类元素:after，:before，修改之后的样式如下。而且，对于图片等资源来说，加载是需要时间的，即便网页加载速度已经很快了，由于高度被图片撑开的过程，不可避免会出现闪烁，这时候我们的padding-top等就发挥大用处啦。这样就实现了我们想要的效果了。
css margin-top 50%问题
vagabond_的博客
09-28 392
css margin-top 问题记录
关于margin与padding设置百分比的问题
境界线上的地平线
07-26 1020
margin 与 padding 设置为百分比 之前一直认为 margin-top 和 margin-bottom 设置百分比以父容器的高度计算，而 margin-left 和 margin-right 设置百分比以父容器的宽度计算，直到今天群里一个群友问 boostrap 中的栅格系统是如何设置 margin-top 百分比以宽度计算的? 原因是他发现设置的 margin: 10%...
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）
a464064368的博客
03-14 294
https://segmentfault.com/a/1190000004231995
css中padding和margin的异同点介绍
09-25
本文从语法结构、可能取的值、浏览器兼容问题等方面为大家介绍下padding和margin的异同点另附截图，有想学习的朋友可以参考下哈，希望对大家有所帮助
Css padding和margin区别
12-08
这个一个CSS padding和margin的例子，对初学者很有帮助的哦~ .divcss3{border:1px solid #F00;width:400px;margin-left:15px; padding-left:35px;} .box2 { margin-left:10px; padding-left:15px; width:300px...
css中margin属性值百分比的使用
热门推荐
三三
02-21 1万+
margin使我们使用得很频繁的一个属性，用来设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度，可以有 1 到 4 个值。例子：margin:10px 5px 15px 20px; 说明： 属性值 描述 auto 浏览器计算外边距 length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px % 规定基于父元素的宽度的百分比的外边距 inheri...
css padding-top,padding-bottom 百分比值的使用（高度自适应）
weixin_44151357的博客
10-11 1725
css使用小技巧 当padding-top,padding-bottom.margin-top,margin-bottom的值设为百分比时，计算结果是参照父元素的宽度 可以把这一特性用作一些特殊处理的小技巧，比如高度自适应问题，还有我最近了解到的图片占位，避免图片等资源加载的时候出现闪烁抖动 html： <div class="father"> <div class="chil...
CSS中 height/width取值为百分比时参考值 以及 padding/margin(内外边距)设置为百分比时的参考值
qq_37899792的博客
10-22 1463
宽高取值为百分比时的参考值 width 是 基于父元素的 width 计算的值 height 是基于父元素的 height 计算的值 内外边距取值为百分比时的参考值 margin(四个方向：top，right，bottom，left )以及padding(四个方向：top，right，bottom，left )设置的值为百分比的时候， 是相对于最近的父级块级元素的width。 ...
margin-top/bottom，padding-top/bottom百分比取值的问题
九日的博客
10-12 934
一、 1.margin-top/bottom，padding-top/bottom设置为百分比时，取值为父元素宽度的百分比。 2.如果想要取父元素高度的百分比，在父元素上添加代码： writing-mode: vertical-lr; 二、 关于为什么为W3C规定，margin和padding的取值是按照width来计算。 主要有两种说法， 1.避免高度计算的循环依赖； 2.统一基准 1.关于第一种说法： （1）当父元素高度不固定，需要依靠子元素撑开时，计算父元素高度时回去寻找子元素高度与子元素的ma.
css height width padding margin 百分比取值的基准问题
JiM-W 的博客
01-08 5002
新地址：https://github.com/jimwmg/JiM-Blog 标准流下 一 首先，明确width height padding margin 取值可能的四个值： 可能的值 值 描述 auto 浏览器计算内边距。 length 规定以具体单位计的内...
CSS padding和margin百分比的使用和细节
qq_52340302的博客
03-12 1385
padding和margin作为CSS最常用的属性之一，它的用法想必大家都不陌生，但它的值除了数值之外，还有一个百分比！ 数值很简单，输入多少那么padding和margin的值就是多少。那么百分比呢？ 百分比对应的值是根据父元素的宽度来决定的，如果没有就继续往上级去查找，注意：不管是水平还是垂直的padding和margin都是由父辈的宽度来决定。 下面以padding来举个例子： <style> .box { width: 200px; height: 200
css margin padding之百分比
kylin_zdd的专栏
07-04 921
总所周知，margin和padding上可能的值可以是auto、px、em、rem等，当然，也可以是%。 当值为auto时，margin和padding边距依赖于浏览器。 当值为px、em、rem时，是一个固定的值，由浏览器进行计算，相对比较容易理解。 这其中最有意思的值是%，margin、padding设置百分比的值时，参照的都是父元素的宽度，而非left、right参照宽度，top、bot
CSS | margin与padding 百分比
MGsniper的博客
02-18 284
在CSS 盒模型中，依据CSS2.2文档，margin与padding的百分比指定值时，一律参考包含盒的宽度。 示例： .father{ height: 100px; width: 200px; border: solid; } .son{ margin...
margin-top设置为50%会有什么效果
m0_52243496的博客
08-30 2033
冷知识：子元素margin-top的50%是父元素宽度的一半
用百分比布局实现自适应正方形
jhyxz的博客
03-02 322
DOM结构 <div class="box"> <div class="adaptiveSquare"> </div> 方案一：给正方形设置padding-top撑开高度 .adaptiveSquare { width: 50%; height: 0; padding-top: 50%; /* padding是相较于父元素的宽度的，所以只要和width一样宽就是正方形了 */ backg
css中padding和margin的区别
05-19
在 CSS 中，padding 和 margin 都是用来控制元素间距的属性，但它们具有不同的作用。 - `padding` 属性用于控制一个元素的内部填充区域与元素边缘之间的距离，即元素内部内容与边框之间的距离。可以理解为是元素的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值