6.7 CSS 内边距(padding)

为元素内容添加内部空白

padding是HTML元素边界和内容之间的空白。

padding可以通过尺寸单位来定义。

blockquote{ padding: 20px;}

对应于元素边界,padding也可以分别针对4个位置来设置。

blockquote{ padding-bottom: 20px;}

通过给元素添加边界,我们可以更直观的感受内边距的视觉效果:

blockquote{ background: #ccc; border: 1px solid #333;}
Techbrood is a leading search engine on web techniques.

上面的例子中没有添加内边距,可以看到内容和边界紧贴在一起很难看,现在我们加上内边距看看:

blockquote{ background: #ccc; border: 1px solid #333; padding: 20px;}
Techbrood is a leading search engine on web techniques.

我们注意到,元素背景也相应的被扩展到其边界位置。