在学习网页设计中，遇到了需要将三张图片排列到同一行中的情况。

使用典型的float命令分别让这个三个装有图片的盒子进行浮动，并设置每个盒子的宽度(width)为33.3%

为了准确的控制各张图片之间的间距，让图片的宽度铺满整个盒子的空间，并设置盒子的内边距(padding)为10px。从而让各张图片之间的距离为20x。对应CSS代码如下：

.boxer{

float:left;

width:33.3%;

padding:10px;

}

在运行过程中，出现了前两张图片排列在同一行，而第三张图片排列到了下一行中的情况。错误的原因在于这里对width的理解错误。盒子模型中width对应的是可填充区域的宽度，而不包括内外边距(padding，margin)的宽度。也就是说如果将盒子的width设置为33.3%，且将盒子的内边距(padding)设置为10px，整个盒子的实际宽度(包括width、padding、margin)将超过33%.3。那么三个盒子加起来的宽度超过100%，显然这是不可能的，所以第三个盒子被挤到了下一行。

除此之外，在设置盒子的width百分比时，也是相对于父盒子的width所对应的长度而不包括父盒子内外边距的宽度。