关于margin和padding百分比的问题

margin和padding都可以使用百分比值的,但有一点可能和通常的想法不同,就是 margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度,而是宽度 。

引用标准(2.1)原来的表达:

The percentage is calculated with respect to the width of the generated box‘s containing block. Note that this is true for ‘margin-top‘ and ‘margin-bottom‘ as well. If the containing block‘s width depends on this element, then the resulting layout is undefined in CSS 2.1.

The percentage is calculated with respect to the width of the generated box‘s containing block, even for ‘padding-top‘ and ‘padding-bottom‘. If the containing block‘s width depends on this element, then the resulting layout is undefined in CSS 2.1.

宽度参照宽度这点毫无疑问,但高度参照的也是宽度这点,可能就和通常的思路相左,因为毕竟height应用百分比参照的,依然是容器的高度。

关于为什么标准要这么定义,有几种通常的解释,就一并分析一下。由于padding和margin类似,下文就只以padding-top为例。

第一种说法是,padding-top如果以容器高度为参照,那么子元素应用padding值将会继续加高容器的高度,容器高度的变化又会反过来继续影响子元素的padding-top,陷入一个无限循环。

对于不定高的容器来说情况确实如此,但对定高容器则并不成立,这点和height类似,这也是为什么height的容器也必须确定好高度。也就是说,如果padding-top要参照容器高度,就必须和height一样做两种处理。

第二种说法则更为可靠, 为了保持padding(margin)四个值的一统一 。

padding(margin)的值无论引用何种计量,四个值都一直保持统一,难道单独给百分比开特例?结合第一条的多情况处理,如果标准定义padding-top参照容器高度的话,恐怕要列出至少4条以上的例外说明——而这对无论谁,都没有好处:)

事实上,垂直padding参照体是宽度这点也非常有用。虽然早期固化像素的设计中百分比值几乎不应用在padding或者margin上,但随着移动自适应的布局的需要,百分比也逐渐稀疏平常。比如配合background-sizing保持背景的比例,配合media query调整对应的间距,不一而足。这些应用都基于一个事实: 无论垂直还是水平,百分比值始终参考宽度 。

而宽度,实际上,正是自适应和现代web设计的灵魂。

时间: 2024-10-12 19:05:56

关于margin和padding百分比的问题的相关文章

margin、padding单位百分比

年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/,里面有一道题目涉及到了margin和padding单位为百分比的情况.写出来记录一下以防止自己忘记. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text

关于margin和padding取值为百分比和负值的总结

以下是自己学习过程中的总结,直接上结论: 1.margin/padding取值为百分比: margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的. 2.margin取值为负值:      比如 margin-top / right / bottom / left :  -100px; 为负值的情况讨论如下: ①: ②:若元素存在width:则正常: 比如 div { margin: 10px 2% -40px 0 } 表示该盒子顶边距为10px,右边距是父元素宽度的2

margin 、padding的使用方法

网页制作时会遇到为元素设定边距的情况,边距又分为内边距和外边距,即margin和padding. 1.margin和padding是在html中的盒模型的基础上出现的,margin是盒子的外边距,即盒子与盒子之间的距离,而pdding是内边距,是盒子的边与盒子内部元素的距离: 2.margin和padding在用百分比设置宽高时都是相对于屏幕宽度: 3.浏览器一般都自带有内外边距,所以一般都是在开头加入*{margin:0:padding0:}: *代表所有元素,这也可以设置为文档出现过的元素.

Qt qss一些伪装态,以及margin与padding区别

伪状态    描述 :checked    button部件被选中:disabled    部件被禁用:enabled    部件被启用:focus    部件获得焦点:hover    鼠标位于部件上:indeterminate    checkbox或radiobutton被部分选中:off    部件可以切换,且处于off状态:on    部件可以切换,且处于on状态:pressed    部件被鼠标按下:unchecked    button部件未被选中 子部件    描述::down-

ImagView大图片显示,设置margin或者padding后显示比例不协调问题

问题描述:设置一个ImageView的background属性,设置一张大图片时,再设置margin或者padding后缩放比例就不协调,即便是设置android:scaleType=""后也没有效果. 解决办法:把ImageView的宽和高设置固定,这样就不会出现缩放比例不协调的问题.

HTML CSS——margin和padding的学习

你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解: 一.什么是边距 CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间). 二.什么是内边距,什么是外边距 代码2-1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &

网页CSS中*{margin:0; padding:0;}有什么用

* 这东西叫"通配符"用来匹配页面上所有元素.*{margin:0; padding:0;} 像 2L 所说,body ,ul, li ,p,h1~h6,dd,dt 等--都有默认的margin 或padding值的,加上这句就可以删除浏览器这些默认值,方面后面的设置.(注:不是没它不行,只是方便而已) 你加上面那句后页面乱,那是当然的,因为你没加时是基于有默认的margin或padding 进行设置的,去掉了默认值,就当然会乱了.咋办?一,就是不加*{margin:0; paddin

* {margin:0px; padding:0px;}什么意思?

* {margin:0px; padding:0px;} *  表示所有的元素的对齐方式以及和父类之间的间距都为0 body{margin:0px;padding:0px;} body里面的则表示的是网页的body该元素的间距和间距 *号是全部的都外边距和内边距都为0,而body只是主题的外边距和内边距都为0

CSS中margin和padding的区别

本文导读:padding margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距.margin是控件边缘相对父空间的边距. 在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和margin常用的用法 一.padding 1.语法结构 (1)padding-left:10px; 左内边距 (2)pad