CSS填充

时间:2020-01-09 10:34:09  来源:igfitidea点击:

如有关CSS框模型的文字所述,HTML元素周围可以有填充。

HTML元素的填充是使用填充CSS属性指定的。填充CSS属性为:

  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left'

填充CSS属性值的指定方式与边距相同。这是三个示例CSS规则,用于指定某些HTML元素的填充:

#divOne {
    padding : 20px;
}

#divTwo {
    padding : 20px 10px 20px 10px;
}

#divThree {
    padding-top    : 20px;
    padding-right  : 10px;
    padding-bottom : 20px;
    padding-left   : 10px;
}

这些CSS填充示例中的第一个将id值为divOne的HTML元素的所有四个边的填充设置为20像素。通过为padding CSS属性设置值20px来实现。

第二个示例将顶部填充设置为20像素,将右侧填充设置为10像素,将底部填充设置为20像素,将左侧填充设置为10像素。通过将padding CSS属性设置为20px 10px 20px 10px来实现。这四个值分别指定顶部,右侧,底部和左侧的填充。

第三个示例将顶部填充设置为20像素,将右侧填充设置为10像素,将底部填充设置为20像素,将左侧填充设置为10像素。通过分别设置四个CSS属性padding-toppadding-rightpadding-bottompadding-left来实现。