Question

所以我有这个HTML代码：

<!DOCTYPE html>
<html>
    <body>
        <div style="background-color:black;color:white;padding:20px">
        <h2>London</h2>
    </body> 
</html>

我的问题是，padding:20px属性在div元素的style属性中做了什么？这与执行padding:top=20px，padding:right=20px，padding:bottom=20px，padding:left=20px是一回事吗？

我尝试将padding:top=20px，padding:right=20px，padding:bottom=20px，padding:left=20px）放在h2元素中作为这样的属性（已删除{{1}来自padding:20px元素中的style属性：

div

但由于某种原因，上面的行给了我不同的输出，而不是将<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>放在padding:20px元素的style属性中。有人可以解释一下这个区别吗？提前感谢您的帮助！

Answer 1

您的语法错误。

必须是

<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px">London</h2>

是的，简而言之，这与

完全相同

<h2 style="padding: 20px">London</h2>

还有其他三种简短形式：

padding: 10px 5px;

表示应用10px top / bottom和5px left / right。

padding: 10px 5px 0;

表示应用10px top，0到bottom，以及5px left / right。

padding: 1px 2px 3px 4px;

表示应用1px top，2px right，3px bottom，4px left（顺时针，从顶部开始）。

Answer 2

无效

<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>

使用

＆＃13;

h2{
    background: #ccc;
}

＆＃13;

<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

＆＃13;

Fiddle

Answer 3

Padding:20px将在所有4个方向上应用填充。

您也可以这样写padding:20px 20px 20px 20px;，就像这样padding : top right bottom left

反过来或写入padding-right，padding-top和其他两个，可以简单地写入填充并将右侧左上角填充值应用于它。当我们想要为所有方向应用不同的填充值时，此方法很有用。与padding: 5px 10px;类似，这将在顶部和底部应用填充5px，从左侧使用10px;

此外，您的HTML不正确。这样做：

<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

OR

<h2 style="padding:20px 20px 20px 20px;">London</h2>

或者简单地说，

<h2 style="padding:20px;">London</h2>

Answer 4

是的，padding:20px;将相同数量的填充应用于元素的所有边。

此外，您的HTML不正确。这样做：

<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

或者简单地说，

<h2 style="padding:20px">London</h2>

Answer 5

你的，h2填充样式不正确。

你应该为h2元素添加style。

<h2 style="padding:20px">London</h2>

Answer 6

如果您要同时向所有方面应用填充，那么最好只使用padding:20px作为样式值，因为它会减少代码大小。

有关使用CSS填充的更多示例，请参阅此链接：

http://www.w3schools.com/css/css_padding.asp

Answer 7

试试这个。你会知道填充是如何工作的。 padding用于将text /元素定位在元素（parent）中

 <div style="background-color:black;color:white;padding:20px">
    
    <h2 style="border: solid 1px red">London</h2>
    
    </div>

Answer 8

你的语法是完全错误的。它将是

    <h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; 
padding-left: 20px">London</h2>

此外，如果您想为所有方面提供填充，您可以使用如下：

<h2 style="padding: 20px;">London</h2>

或者您也可以写为padding:10px 20px 30px 40px;，这意味着padding-top:10px,padding-right:20px,padding-bottom:30px,padding-left:40px,

Padding: 10px 20px表示padding-top:10px,padding-bottom:10px,padding-left:20px,padding-right:20px

Padding: 10px 30px 20px表示padding-top:10px,padding-bottom:20px,padding-left:30px,padding-right:30px

Answer 9

您的css语法不正确

正确的语法是：

<h2 style="padding-top=20px; padding-right=20px; padding-bottom=20px; padding-left=20px;">London</h2>

OR

<h2 style="padding=20px;">London</h2>

OR

<h2 style="padding=20px 20px 20px 20px;">London</h2>

Answer 10

h2{ padding:20px;}`<h2 style="padding:20px">London</h2>`

Answer 11

h2{
    background: #ccc;
}

<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

Answer 12

填充：20px表示从右上角左下方给出20px填充。你的意思是填充顶部，填充右边....而不是填充：右边，填充：顶部等..因为这个不适合我的。

HTML填充样式

12 个答案: