HTML 填充样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31554574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Padding Style
提问by LP496
So I have this html code:
所以我有这个html代码：
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px">
<h2>London</h2>
</body>
</html>
My question is, what does the padding:20pxproperty do in the style attribute for the divelement? Is that the same thing as doing padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px?
我的问题是，该padding:20px属性在div元素的 style 属性中有什么作用？这和做padding:top=20px, padding:right=20px, padding:bottom=20px, 是一样的padding:left=20px吗？
I tried putting (padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px) in the h2element as an attribute like this (removed padding:20pxfrom the style attribute in the divelement):
我尝试将 ( padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px)h2作为这样的属性放入元素中（padding:20px从div元素中的 style 属性中删除）：
<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>
But for some reason the line above gave me a different output than putting the padding:20pxin the style attribute of the divelement. Can someone please explain me this difference? Thank you in advance for the help!
但是由于某种原因，上面的行给了我一个与将 放入元素padding:20px的 style 属性不同的输出div。有人可以向我解释这种差异吗？预先感谢您的帮助！
回答by connexo
Your syntax is full of errors.
你的语法错误百出。
It has to be
它一定要是
<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px">London</h2>
and yes, in short this is identical to
是的，简而言之，这与
<h2 style="padding: 20px">London</h2>
There is also three other short forms:
还有其他三种简短形式：
padding: 10px 5px;
means to apply 10px top/bottom, and 5px left/right.
表示应用 10px 顶部/底部和 5px 左/右。
padding: 10px 5px 0;
means to apply 10px top, 0 to bottom, and 5px left/right.
表示应用 10px 顶部，0 到底部和 5px 左/右。
padding: 1px 2px 3px 4px;
means to apply 1px top, 2px right, 3px bottom, 4px left (clockwise, starting at top).
表示应用顶部 1px、右侧 2px、底部 3px、左侧 4px（顺时针，从顶部开始）。
回答by Dmitriy
回答by pcs
yours, h2padding style is incorrect.
你的，h2填充样式不正确。
you should add stylefor the h2 element.
您应该style为 h2 元素添加。
<h2 style="padding:20px">London</h2>
回答by Mike
If you're gonna apply padding to all sides simultaneously, you're better off just using padding:20pxas a value for style since it cuts down on code size.
如果您要同时对所有边应用填充，最好仅将padding:20px其用作样式值，因为它可以减少代码大小。
See this link for more examples on the use of CSS padding:
有关使用 CSS 填充的更多示例，请参阅此链接：
回答by Raghavendra
try this. you will know how the padding works. padding is for positioning the text/element in an element(parent)
尝试这个。你会知道填充是如何工作的。填充用于在元素（父）中定位文本/元素
<div style="background-color:black;color:white;padding:20px">
<h2 style="border: solid 1px red">London</h2>
</div>回答by Chandresh
Your syntax is totally wrong.It would be
你的语法是完全错误的。它会是
<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px;
padding-left: 20px">London</h2>
Also if you want to give padding to all sides you can use as below :
另外，如果你想给所有边填充，你可以使用如下：
<h2 style="padding: 20px;">London</h2>
Or you can also write like padding:10px 20px 30px 40px;it means padding-top:10px,padding-right:20px,padding-bottom:30px,padding-left:40px,
或者你也可以这样写padding:10px 20px 30px 40px;就意味着padding-top:10px,padding-right:20px,padding-bottom:30px,padding-left:40px,
Padding: 10px 20pxit means padding-top:10px,padding-bottom:10px,padding-left:20px,padding-right:20px
Padding: 10px 20px它的意思是 padding-top:10px,padding-bottom:10px,padding-left:20px,padding-right:20px
Padding: 10px 30px 20pxit means padding-top:10px,padding-bottom:20px,padding-left:30px,padding-right:30px
Padding: 10px 30px 20px它的意思是 padding-top:10px,padding-bottom:20px,padding-left:30px,padding-right:30px
回答by Vivek Tankaria
Padding:20pxwill apply padding in all 4 directions .
Padding:20px将在所有 4 个方向应用填充。
You can also write this way padding:20px 20px 20px 20px;this goes like this padding : top right bottom left
你也可以写这样padding:20px 20px 20px 20px;该是这样的 padding : top right bottom left
SO instead or write padding-right, padding-top and other two, one can simply write padding and apply the right left top bottom padding value to it. This method is helpful when we want to apply different padding values for all directions. Like padding: 5px 10px;This will apply padding 5px in top and bottom and 10px from left right;
所以，或者写 padding-right、padding-top 和其他两个，可以简单地写 padding 并将右左上下填充值应用到它。当我们想要为所有方向应用不同的填充值时，此方法很有用。Like padding: 5px 10px;This 将在顶部和底部应用 5px 填充，从左向右应用 10px；
Also, your HTML is incorrect. Do this:
此外，您的 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>
Or simply,
或者简单地说，
<h2 style="padding:20px;">London</h2>
回答by shhrzl
Your css syntax is incorrect
您的 css 语法不正确
The correct syntax is:
正确的语法是：
<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>
回答by Nandhini
h2{ padding:20px;}`<h2 style="padding:20px">London</h2>`
回答by Wes Foster
Yes, padding:20px;applies the same amount of padding to all sides of your element.
是的，padding:20px;对元素的所有侧面应用相同数量的填充。
Also, your HTML is incorrect. Do this:
此外，您的 HTML 不正确。做这个：
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>
Or simply,
或者简单地说，
<h2 style="padding:20px">London</h2>
