CSS padding内边距

padding

padding属性设置元素的内边距。属性值默认0。属性值auto表示由浏览器计算内边距。属性值为百分比时是基于父元素的宽度计算。属性值可以是inherit

这是一个简写属性,属性值最多为4个,分别表示上内边距,右内边距,下内边距,左内边距。属性值为三个时,分别表示上内边距、左右内边距、下内边距。属性值为两个时表示上下内边距、左右内边距。属性值为一个时表示四边内边距。

block元素示例

<p >Hello World</p>
<p >Hello World</p>

结果:

Hello World

Hello World

block和inline-block元素都可以通过padding改变自身容器的大小

inline元素示例

  <span >Hello world</span>
  <p>正常元素</p>

结果:

Hello world

正常元素

inline元素设置上下padding是无效的,它只是把背景扩大了,并不会影响行高的计算,背景在视觉上可能会延伸到其他行,进而和其他内容发生重叠。