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

Question

我知道是内边距，但到底会出现什么样的效果

Answer 1

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

Answer 2

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

Answer 3

padding在CSS中是用来控制元素内边距的。

padding如果写1个值，则上下左右4个内边距都是此值

padding如果写2个值，则是上下、左右值。

padding如果写4个值，则是上、右、下、左值。

Answer 4

做了个图片

本回答被提问者采纳

Answer 5

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