Padding

优质

小牛编辑

122浏览

2023-12-01

padding属性允许您指定元素内容与其边框之间应显示的空间大小 -

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

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

padding-bottom指定元素的底部填充。
padding-top指定元素的顶部填充。
padding-left指定元素的左边距。
padding-right指定元素的右边距。
padding用作前面属性的简写。

现在，我们将看到如何将这些属性与示例一起使用。

填充底部属性

padding-bottom属性设置元素的底部填充（空格）。这可以采用％的长度值。

这是一个例子 -

<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>

填充左侧属性

padding-left属性设置元素的左边距（空格）。这可以采用％的长度值。

这是一个例子 -

<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>

填充权属性

padding-right属性设置元素的右边距（空格）。这可以采用％的长度值。

这是一个例子 -

<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>

填充属性

padding属性设置元素的左，右，上和下填充（空格）。这可以采用％的长度值。

这是一个例子 -

<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>