返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

CSS-填充

时间:2020-06-12 13:19来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥

填充属性允许你指定多少空间应该元素的内容和它的边框之间出现-

该属性的值应为长度,百分比或单词Inherit如果该值是Inherited,则它将与其父元素具有相同的填充。如果使用百分比,则该百分比为包含框的百分比。

以下CSS属性可用于控制列表。您还可以使用以下属性为框的每一侧上的填充设置不同的值-

  • 所述填充底部指定元素的底部填充。

  • 填充机顶指定元素的顶部填充。

  • 所述填充左指定元素的左填充。

  • 所述填充右指定元素的右填充。

  • 所述填充用作速记前述性质。

现在,我们将通过示例了解如何使用这些属性。

底部填充属性

所述填充底属性设置元素的底部填充(空间)。这可以采用%的长度值。

这是一个例子-

现场演示
<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom padding
      </p>
      
      <p style = "padding-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom padding in percent
      </p>
   </body>
</html> 

它将产生以下结果-

padding-top属性

填充机顶属性设置元素的顶部填充(空间)。这可以采用%的长度值。

这是一个例子-

现场演示
<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top padding
      </p>
      
      <p style = "padding-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top padding in percent
      </p>
   </body>
</html> 

它将产生以下结果-

左填充属性

所述填充左属性设置元素的左填充(空间)。这可以采用%的长度值。

这是一个例子-

现场演示
<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left padding
      </p>
      
      <p style = "padding-left: 15%; border:1px solid black;">
         This is another paragraph with a specified left padding in percent
      </p>
   </body>
</html>

它将产生以下结果-

右填充属性

所述填充右属性设置元素的右填充(空间)。这可以采用%的长度值。

这是一个例子-

现场演示
<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right padding
      </p>
      
      <p style = "padding-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right padding in percent
      </p>
   </body>
</html> 

它将产生以下结果-

填充属性

所述填充的元素的属性集的左,右,顶部和底部填充(空间)。这可以采用%的长度值。

这是一个例子-

现场演示
<html>
   <head>
   </head>
   
   <body>
      <p style = "padding: 15px; border:1px solid black;">
         all four padding will be 15px 
      </p> 
      
      <p style = "padding:10px 2%; border:1px solid black;"> 
         top and bottom padding will be 10px, left and right
         padding will be 2% of the total width of the document. 
      </p> 
      
      <p style = "padding: 10px 2% 10px; border:1px solid black;">
         top padding will be 10px, left and right padding will 
         be 2% of the total width of the document, bottom padding will be 10px
      </p> 
      
      <p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
         top padding will be 10px, right padding will be 2% of
         the total width of the document, bottom padding and top padding will be 10px 
      </p>
   </body>
</html> 

它将产生以下结果-

 上一页  打印页面
下一页  
 
 
------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
  • CSS-游标

    CSS 的 cursor 属性允许您指定应该显示给用户的光标类型。 此属性的一种很好用法是使...

  • CSS-列表

    列表在传达一组编号或项目符号点时非常有用。 本章教您如何使用CSS控制列表类型,位置...

  • CSS-边距

    的 余量 属性定义围绕一个HTML元素的空间。 可以使用负值来重叠内容。 margin属性的值...

  • CSS-边框

    该 边框 属性允许您指定框的代表元素的边界应该是什么样子。 您可以更改边框的三个属...

  • CSS-使用图像

    图片在任何网页中都起着重要作用。 尽管不建议包含很多图像,但是在任何需要的地方使...

  • CSS-伪元素

    CSS伪元素用于向某些选择器添加特殊效果。 您无需使用JavaScript或任何其他脚本即可使...

猜你感兴趣