第1个回答 2010-04-05
使用后..比如..
<div style="border:1px solid #ccc;width:100px;">hello,world</div>
这样后显示后..你会发现..div的width为100....border为1..而且里面的字..helloworld是贴着div的左边框的....
如果你想helloworld的位置不贴左边框.在传统的HTML里面我们都是加 来实现的...但是过多的插入空格则造成代码的拥挤..比如..我想实现.hello,world的字离左边框..100个px..那么你就要插入很多个空格.
那么..padding内边距的出现就解决了这一问题....当使用padding-left的时候...hello,world则相应的离左边框n个px...
比如:
<div style="border:1px solid #ccc;width:100px;padding-left:10px;">hello,world</div>
那么此时...hello,world离左边框就有10个象素的距离
你可以会说..padding跟margin不是一样的么....很明确的告诉你..是不一样的..
margin用于元素跟元素之间...而padding是用于元素跟内部文本之间或者内部元素之间...
而且.这2个有一个很大的不同.就在于...margin不会加大元素的本身的大小..而padding却会增加..比如
<div style="border:1px solid #ccc;width:100px;padding-left:10px;">hello,world</div>
这样后...那么.div的width就会变成110..如果你这里用的是padding而不是padding-left..则相应的..width,height各加2倍的padding值...width就会变成120...
如果你利用margin对2个元素之间..那么..2个元素自身的width和height则不会变