CSS元素和padding宽度的问题

Question

在下面代码情况里，这个元素的总宽度应该是 padding 的宽加上元素本身的宽，也就是父元素的16.5% 。实际显示的时候为什么总宽度是13.5%，这个 padding 的宽度跑进元素本身宽度里面了？这里的父元素是浏览器宽度1583，盒子里蓝色部分宽度应该是1583×13% = 205.78，

float: left;
padding-top: 18.5px;
padding-left: 3.5%;
width: 13%;

为什么会出现这种情况呢？ 就是这个网页页头的logo部分：http://originoo.com/ws/p.inde...

Answer 1

你的代码里

html元素设置了box-sizing: border-box;

别的元素设置了box-sizeing: inherit;

所以盒子的宽度应该是padding与内容之和

Answer 2

这个属于CSS BOX MODEL基础

盒模型是一个种布局方式，每个元素都被表示一个矩形的盒子，有尺寸大小、属性、颜色、边框和位置（渲染）目标。

盒模型默认的值是content-box，CSS3中新增了一种盒模型计算方式：padding-box，还有常用的 border-box，几种盒模型计算元素宽高的区别如下：

content-box（默认）

布局所占宽度Width：

width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占宽度Width：

width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占宽度Width：

width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

height = height(包含padding-top + padding-bottom + border-top + border-bottom)

Answer 3

难道padding不是算在元素宽度里的？

Answer 4

padding也会撑大元素

Answer 5

样式里box-sizing设置成了border-box 怪异盒子模型.
应该是:box-sizing:content-box;

http://www.moorain.xin/articl...