Question

Css 认知增加padding的值，内容块自动增加了？

#tree{
width: 50px;
height: 200px;
background: blue;
padding: 50px;
}

本来宽应该是50px,后来加了一个padding，blue块变成了150px？。。。

Answer 1

tree块的宽度是50(width)+50(左padding)+50(右padding)=150px,,加的padding是内边距,,背景色是和tree一样的,,所以你的blue块就变成了150px
如果你的blue块只要50px的话得用外边距margin,,#tree{width: 50px;height: 200px;background: blue;margin: 50px;},,这样你的blue块宽度就只有50px,,左右两边边距留白50px

Answer 2

CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。
CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

也就是说背景包括了内容的宽度width 内边距padding-left和padding-right 以及边框的宽度，border-left和border-right 你的代码计算结果50+50+50=150

Answer 3

blue块是什么？
应该是tree吧！这个div的宽度变成150px，高度300px。所占的位置是内边框（padding）加上外边距（margin）加宽度（width）加边框（border）等于所占总面积。
即一个盒子的宽度=padding+margin+width+border
高同理=padding+margin+height+border
希望能帮到你，能看明白。加油

追问

颜色不是内容的嘛？padding不是透明的嘛？怎么又有颜色了？

色块的面积增加了，我的意思是。

追答

padding就是一个内边距，跟透明没关系

Answer 4

定义和用法

padding 简写属性在一个声明中设置所有内边距属性。

说明

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；

因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

如果你只是想让tree和周围的元素产生举例请使用外边据margin

Answer 5

一个盒子的实际总宽度=width+border+padding,所以说你加了padding：50px左右各50的像素值，50+50+50当然是150px了，但是这种情况在ie里是不存在的