淘先锋技术网

首页 1 2 3 4 5 6 7

CSS Padding填充 - 编程基础教程

Padding填充添加元素的内容和其边框之间的空间。

您可以为单个边缘设置填充，或使用缩写padding属性在单个声明中应用值。

填充属性如下所列。

  • padding-top
    设置顶边的填充。
    Value: length or %
  • padding-right
    设置右边的填充。
    Value: length or %
  • padding-bottom
    设置底边的填充。
    Value: length or %
  • padding-left
    设置左边的填充。
    Value: length or %
  • padding
    此简写属性在单个声明中设置所有边的填充。
    Value: 1 - 4 length or % values

当使用百分比值指定填充时，百分比始终从包含块的宽度导出。

以下代码将Padding应用于元素。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
  border: 10px double black;
  background-color: lightgray;
  background-clip: content-box;
  padding-top: 0.5em;
  padding-bottom: 0.3em;
  padding-right: 0.8em;
  padding-left: 0.6em;
}
</style>
</head>
<body>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <p>This is a test.</p>
</body>
</html>

Padding简写

padding属性可以有一到四个值。

你可以使用padding shorthand属性来设置在单个声明中填充所有四个边。

您可以为此属性指定一到四个值。

当提供四个值时，它们用于设置填充分别用于顶部，右侧，底部和左侧。

padding: 2px 5px 7px 9px;
    top padding is 2px
    right padding is 5px
    bottom padding is 7px
    left padding is 9px

padding: 2px 5px 7px;
    top padding is 2px
    right and left paddings are 5px
    bottom padding is 7px

padding: 2px 5px;
    top and bottom paddings are 2px
    right and left paddings are 5px

padding: 2px;
    all four paddings are 2px
属性描述CSS
padding-bottom设置底部的填充1
padding-left设置左边填充1
padding-right设置右边填充1
padding-top设置顶部填充1
padding填充缩写属性设置1