HTML填充样式

所以我有这样的HTML代码：HTML填充样式

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

我的问题是，什么是padding:20px财产为div元素的样式属性呢？与做,padding:right=20px,padding:bottom=20px,padding:left=20px一样吗？

我试图在h2要素投入（，padding:right=20px，padding:bottom=20px，padding:left=20px）作为这样一个属性（在div元素从样式属性中删除padding:20px）：

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

但由于某种原因，上面的代码给了我一个不同于padding:20px的div元素的style属性。有人能解释我这种差异吗？预先感谢您的帮助！

来源

2015-07-22 LP496

你的语法是完全错误的。

它必须是

<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的顶部/底部，以及5px左/右。

padding: 10px 5px 0;

意味着应用10px顶部，0到底部和5px左/右。

padding: 1px 2px 3px 4px;

意味着应用1px顶部，2px右边，3px底部，4px左边（顺时针，从顶部开始）。

来源

2015-07-22 05:35:27 connexo

这是一个非常有用的答案。了解其他形式的填充属性真的帮了我。非常感谢你解释这些！还有一个简单的问题......风格是h2 html元素的一个属性还是只是一个CSS属性？ – LP496

这是一个所谓的通用属性，它基本上意味着它可用于所有HTML元素。尽管如此，除了在一些非常特殊的情况下，使用css属性（例如背景图像）必须动态设置以外，被广泛认为是不好的做法。常规的做法是将你的样式放入css样式表的一个css类中，然后通过（又一次）通用的'''''属性将它应用到你的元素中。 – connexo

好的！这现在完全有意义。十分感谢你的帮助！ – LP496

是的，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>

来源

2015-07-22 05:33:50

无效

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

使用

h2{ 
 
    background: #ccc; 
 
}

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

Fiddle

来源

2015-07-22 05:37:06 Dmitriy

非常感谢Dmitriy的帮助！我明白我的错误了！ – LP496

你，h2填充风格是不正确。

您应该为h2元素添加style。

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

来源

2015-07-22 05:37:24 pcs

如果你要同时应用填充到四面八方，你最好只是用padding:20px作为样式值，因为它减少了代码的大小。

参见使用CSS填充此链接更多的例子：

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

来源

2015-07-22 05:37:30 Mike

尝试。你会知道填充是如何工作的。填充是用于在元件（父）的文本/元件定位

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

来源

2015-07-22 05:39:34 Raghavendra

-1

填充：20像素意味着你给20像素填充从右上方左下方。你的意思是填充顶部，填充 - 正确的....而不是填充：正确，填充：顶部等..因此，这不是我的工作。

来源

2015-07-22 05:42:26

你的语法是完全wrong.It将

<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

来源

2015-07-22 05:42:31 Chandresh

非常感谢你的帮助Chandresh！我明白我的错误了！ – LP496

感谢您的编辑Saina！帮助了解不同的形式。 – LP496

Padding:20px将适用所有4个方向的填充。

你也可以写这样padding:20px 20px 20px 20px;这是这样的padding : top right bottom left

SO代替或写填充右，填充顶和另外两个，一个可以简单的写填充和右左顶部底部填充值适用于它。当我们想要为所有方向应用不同的填充值时，此方法很有用。像padding: 5px 10px;这将在顶部和底部应用填充5px，从左到右应用10px;

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

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

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

或者干脆，

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

来源

2015-07-22 05:43:30

你的CSS语法不正确

正确的语法是：

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

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

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

来源

2015-07-22 05:57:16 shhrzl

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

来源

2015-07-22 06:08:37 Nandhini

HTML填充样式

回答

相关问题