请教div+css中padding的一些用法？

Question

在div中对某个样式加了padding属性后，其结构就会发生改变.
比如设置一个ID宽为100px，再设置一个padding-left为10px，那么在浏览器上显示就会比原来多出10px，请问这是为什么如何能让它不多这10px呢.？？

Answer 1

边框属性(border)用来设定一个元素的边线。
　　边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
　　间隙属性(padding)是用来设置元素内容到元素边界的距离。
　　这三个属性都属于CSS中box类型的属性。

说细点就是

padding 是元素内补白，margin 是元素外边距

比如定义 span {padding: 10px; background-color: red;} 那么 <span>abc</span> 看到的是一个红色块，而且不是紧贴 abc 的。

但是如果定义 span {margin: 10px; background-color: red;} ，那么 <span>abc</span> 的红色块边缘紧贴 abc 字符，但是周围有 10 个像素的边界

Answer 2

padding是间隙属性。设置了它应该是指在元素内侧的大小。但现在问题是不设置padding时元素大小不变，设置了padding后就会发生改变。我看一些大型网站都有设置padding的但它们的格局都没有变的。
上面两个回答我觉得还没有解决真正的问题。第一位回答的只是一些定义而已，第二位说到了overflow这个我也试了但不管用。。不应该是浏览器的问题因为我同样打开别的网站一样的代码人家的上面没有变化。。

Answer 3

CSS布局在不同版本和不同核心的浏览器上表现的效果不一,这是因为各浏览器对CSS的解释上有出入.
你所描述的可能是在IE6上发生的问题,IE6在CSS上BUG比较多.可以这样解决:

<div style='width:100px; height:100px; overflow:hidden; padding-left:10px; background:#eee'>aaa</div>

Answer 4

我帖出的代码是本地做过测试的，CSS在MOZILLA和IE两个核心下的表现不同是WEB布局方面最头疼的地方。

人家CSS修补BUG的地方你看到了么？我只是把CSS都定义到了元素上这样比较明显。

本身只是文字缩进可以不用padding-left，可以用text-indent。

overflow:hidden做到了强制略去超出的部分。