|
该填充属性允许你指定多少空间应该元素的内容和它的边框之间出现- 该属性的值应为长度，百分比或单词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> 它将产生以下结果- |