CSS代码中的padding到底有什么作用

CSS代码中的padding到底有什么作用

做了个图片

文字的边缘距边框的距离
padding-top文字的边缘距上面框的距离

边框的里面可以有一层边内补白(padding),边内补白定义了边框与边框里面内容的距离.一个div宽300px。里面的文字宽280px；padding-left：2px；内边距就是调整文字在div中的距离（位置），向左多少，向上多少，向下多少，向右多少。因为有时文字不是居中的，需要调整位置，而外边距只管div和div之间的距离，不管里面的。

使用后..比如..
<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则不会变

padding在CSS中是用来控制元素内边距的。
padding如果写1个值，则上下左右4个内边距都是此值
padding如果写2个值，则是上下、左右值。
padding如果写4个值，则是上、右、下、左值。