具有CSS“ padding”属性HTML填充

最新推荐文章于 2024-12-04 13:21:04 发布

cunjiu9486

最新推荐文章于 2024-12-04 13:21:04 发布

阅读量565

点赞数

文章标签： css html css3 python javascript ViewUI

原文链接：https://www.poftut.com/html-padding-with-css-padding-attribute/

版权

Padding HTML elements provide a better and smoother user experience from the design point of view. HTML elements can be padded by using CSS styling. In this tutorial, we will learn how to pad with CSS for different or all sides of the HTML element.

从设计的角度来看，填充HTML元素可提供更好，更流畅的用户体验。可以使用CSS样式填充HTML元素。在本教程中，我们将学习如何在HTML元素的不同或所有方面使用CSS填充。

CSS填充语法 (CSS padding Syntax)

The HTML padding is provided by the padding CSS attribute. We can use the padding attribute as separately or inside the HTML element style attribute.

HTML填充由padding CSS属性提供。我们可以单独使用padding属性，也可以在HTML元素样式属性内使用。

padding: PADDING_VALUES;

`padding` is the attribute name that can take single or multiple PADDING_VALUES.
“ padding”是可以使用单个或多个PADDING_VALUES的属性名称。
`PADDING_VALUES` can be single or multiple values up to 4. All different count of values will have different padding implementation which will be explained below example.
“ PADDING_VALUES”可以是最多4个的单个或多个值。所有不同的值计数将具有不同的填充实现，下面将在示例中进行说明。

具有单一值的填充(顶部/右侧/底部/左侧) (Padding with Single Value (top/right/bottom/left))

We will start with simple steps where we will provide a single value to the padding CSS attribute where this value will be used for all 4 sides padding length.

我们将以简单的步骤开始，我们将为padding CSS属性提供一个值，该值将用于所有4个边的padding长度。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 30px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 70px;
}

</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

具有4个值的填充(顶部，右侧，底部，左侧)(Padding with 4 Values (top,right,bottom,left))

We can also provide 4 values for each side of the HTML element padding value. In this example, we will provide padding values 10px 20px 30px 40px and 50px 70px 90px 110px.

我们还可以为HTML元素填充值的每一侧提供4个值。在此示例中，我们将提供填充值10px 20px 30px 40px和50px 70px 90px 110px 。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 10px 20px 30px 40px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 50px 70px 90px 110px;
}

</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

具有3个值的填充(顶部，左侧/右侧，底部)(Padding with 3 Values (top, left/right,bottom))

We can also provide 3 values where the first value for top padding, the second value for right and left padding and the third value for the bottom padding.

我们还可以提供3个值，其中第一个值用于顶部填充，第二个值用于左右填充，第三个值用于底部填充。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 10px 20px 30px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 50px 70px 90px;
}

</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

用2个值填充(Padding with 2 Values)

When we provide 2 values to the padding CSS attribute the first value will be used for top and bottom sides and the second value will be used for right and left sides padding.

当我们为padding CSS属性提供2个值时，第一个值将用于顶部和底部，第二个值将用于右侧和左侧。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 10px 30px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 50px 90px;
}

</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

具有百分比值类型的填充(Padding with Percentage Value Type)

Up to now, we have used the px which is pixel short form for padding values. We can also use the percentage where the parent element sizes percentage is used for padding.

到目前为止，我们已经使用px即像素的短格式)来填充值。我们还可以使用百分比，其中父元素大小百分比用于填充。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 5%;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 10%;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

用em字体填充(Padding with em Font Size)

Another padding size unit is em which is related to the font size. 1 em is equal to a one letter size.

另一个填充大小单位是em ，它与字体大小有关。 1 em等于一个字母的大小。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding: 1em;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 3em;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 30 pixels padding for all sides.</p>

<p class="ex2">This paragraph has a 70 pixels padding for all sides.</p>

</body>
</html>

将多个单位用于单个填充(Using Multiple Units For Single Padding)

We have learned that we can use different units like px,%, em in order to set padding sizes. We can use all of these padding units in a single padding example.

我们了解到，可以使用px ， % ， em类的不同单位来设置填充大小。我们可以在单个填充示例中使用所有这些填充单元。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red;
  padding: 10px 20% 2em;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding: 30px 40% 4em;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>

在HTML元素样式属性内填充为内联CSS(Padding As Inline CSS Inside HTML Element Style Attribute)

We can also use CSS inline attribute features which are used with HTML style attribute. Below we will set a single value for padding as inline CSS.

我们还可以使用与HTML style属性一起使用CSS内联属性功能。下面，我们将为内嵌CSS设置单个填充值。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
}
</style>
</head>
<body>

<p class="ex1" style="padding:40px;">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2" style="padding:80px;">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>

Padding As Inline CSS Inside HTML Element Style Attribute

顶部填充 (Padding For Top Side)

CSS also provides specific side padding attributes. padding-top is used for only padding for the top side. padding-top CSS attribute can be also used with padding and other padding attributes that will be explained below.

CSS还提供了特定的侧面填充属性。 padding-top仅用于顶部的填充。 padding-top CSS属性也可以与padding和其他padding属性一起使用，下面将对其进行说明。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding-top: 40px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding-top: 60px;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>

右侧填充(Padding For Right Side)

We can pad only for the right side with the padding-right CSS attribute like below.

我们只能使用右侧的padding-right CSS属性padding-right如下所示。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding-right: 40px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding-right: 60px;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>

底侧填充(Padding For Bottom Side)

We can use padding-bottom in order to pad for only the bottom side.

我们可以使用padding-bottom来填充底部。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding-bottom: 40px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding-bottom: 60px;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>

左侧填充(Padding For Left Side)

We can use padding-left CSS attribute in order to set HTML element left side padding value.

我们可以使用padding-left CSS属性来设置HTML元素左侧的padding值。

<html>
<head>
<style>
p.ex1 {
  background-color: lime;
  border: 1px solid red; 
  padding-left: 40px;
}

p.ex2{
  background-color: lime;
  border: 1px solid red; 
  padding-left: 60px;
}
</style>
</head>
<body>

<p class="ex1">This paragraph has a 40 pixels padding from top side.</p>

<p class="ex2">This paragraph has a 60 pixels padding from top side.</p>

</body>
</html>