前端 html 一个元素padding-right，不起作用？毫无反应？padding right 无效

有没有宝子，开发html，给一个父元素padding-right，子元素却毫无反应，万分捉急，在线等，急！

我知道你着急，但是你先别急

我会在这里娓娓道来，带你走上一个新的技术台阶

1、一段基础代码

代码如下：

代码执行效果如下

这里，parent元素 width: 100%; 占满了浏览器，child元素 width: 100%; 占满了parent。

2、这时，想child与parent有个20px的左边距，如下，给parent 添加要给padding-left: 20px;

.parent {

width: 100%;

height: 300px;

background-color: rgb(83, 145, 63);

padding-left: 20px;

}

代码执行效果如下图：

3、得到了我们想要的效果，child偏移了20px，这时又想，child与parent有个20px的右边距，自然而然想到给parent 添加要给padding-right: 20px;

.parent {

width: 100%;

height: 300px;

background-color: rgb(83, 145, 63);

padding-left: 20px;

padding-right: 20px;

}

代码执行效果如下图：

没有得到预想的child对parent右偏移，但是偏移值是有效的，看图右下角圆圈。怎么回事？

4、先给出解决方法，给parent添加一行 box-sizing: border-box;

.parent {

width: 100%;

height: 300px;

background-color: rgb(83, 145, 63);

padding-left: 20px;

padding-right: 20px;

box-sizing: border-box;

}

代码执行效果图

得到了想要的偏移，看右小角圆圈：700的宽度变成了660，怎么回事？

5、首先得先理解html的盒子模型

看第一张图

看红色框，每个元素占据的空间，包括

Margin(外边距) -

Border(边框) -

Padding(内边距) -

Content(内容) -子元素能使用的空间

这里Margin、Border、Padding都是0，而Content是700x300 ，

浏览器的宽度是700，Content内容区占据了全部的width，也就是700.

第二张图，给了一个padding

Content内容区依然占据了全部的width：700. padding 的20没有起到什么作用。因为box-sizing 这个属性

box-sizing ，用于指定盒模型的计算方式，即如何计算元素的总宽度和总高度。它有以下两个常用的参数：

content-box：

默认值。

在计算元素的总宽度和总高度时，只包括内容区域（content area）的尺寸，不包括边框（border）和内边距（padding）。

即元素的宽度和高度由内容的宽度和高度决定。

border-box：

在计算元素的总宽度和总高度时，包括内容区域（content area）的尺寸、边框（border）和内边距（padding）。

即元素的宽度和高度包括了边框和内边距，内容区域的尺寸会自动调整以适应剩余的空间

于是，我们在第四张图，设置了box-sizing: border-box;

Content内容区变成了660，两边padding分别是20，加起来是700

parent元素的Content内容区变成了660，child元素是其父元素的Content，所有只有660，效果就是有了左右的偏移。

两个重点：

1、元素with的计算方式

2、child元素是其父元素的Content，无法超出Content区