我所不清楚的 padding

原文: https://zswfx.com/articles/5d...

起源来自于一次面试问题如何保证元素高度和宽度保持一致，虽然过去好久，能够深度看看这个问题。下面就说说盒子模型(box-model), padding

盒子模型(box-model)

盒子模型(box-model) 是浏览器渲染引擎进行的布局的标准之一。引擎会把页面全部元素当成一个矩形的盒子，经过css来决定这些盒子的大小，位置及其其余属性。

盒子模型示意图(侵删)

盒子模型拥有四个边界:

• 内容边界(content edge)
• 内边距边界(padding edge)
• 边框边界 (border edge)
• 外边框边界 (margin edge)

https://developer.mozilla.org...

内容边界是包含元素的真实内容的，例如文本，图像，视频等，内容边界的尺寸就是这些内容的宽度，能够经过 width, height, min-width, min-height等控制。内边距区域是内容和边距之间的距离，一般尺寸是padding-box宽度或者高度，由padding 控制。边框是从内边距区域扩展，经过border-width 来控制，他的尺寸位于内外边距之间。最外一层则是外边距区域，经过 margin 来控制，从边框边界开始扩展，外边距的区域的尺寸一般会发生外边距合并，这里外边距不容易搞清楚。

盒子模型(box-model) 控制属性 - box-sizing

box-sizing 决定用户浏览器如何计算元素总高度和总宽度, box-sizing 有两个取值:

content-box

元素的宽度值包含内容边界内的尺寸，任何新增的例如内边距，边框 都会被加入到元素的整体的宽度中

width = 内容的宽度
height = 内容的高度

border-box

内容的宽度包含元素的内容尺寸，内边距尺寸，外边距尺寸。此刻margin 依旧不会被计算到宽度内

width = 内容的宽度 + 边框的宽度 2 + 边距的宽度 2
height = 内容的高度 + 边框的宽度 2 + 边距的高度 2

说说 padding

padding 是设置一个元素内容和它边界的之间的空间度量，这里就要求padding不能是负值。

padding是四个内边距的缩写，分别是:

• padding-top
• padding-right
• padding-bottom
• padding-right

padding 在css 中是 没法继承，适用用基本全部的元素，除了 table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column。

padding 取值能够为具体css的数量值，也能够为百分比，可是取值百分比的时候，参照量是不一样的哦。

padding 取值auto是无效的，包含auto的值会被浏览器忽略

padding 的百分比

一个元素的填充区域在元素的内容和边框之间。以下图:

根据图片示例表示 padding 不可以是负值

当一个元素内边距(padding) 是百分比的时候，padding百分比和自己的元素的宽度是有关的。无论padding 是 top,right,bottom,left 都是根据宽度来的计算哦。

当初在格家网络面试的时候，面试官的问了一个面试题，如何保证一个元素的高度和宽度是一致的，这里就要学习这个知识点，padding和宽度是相关的， 设置高度为0，padding-bottom: 100%, width: 100px; 则就能够获得一个高度和宽度都是100px的盒子了。