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属性。有人能解释我这种差异吗?预先感谢您的帮助!
你的语法是完全错误的。
它必须是
<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左边(顺时针,从顶部开始)。
是的,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>
你,h2
填充风格是不正确。
您应该为h2元素添加style
。
<h2 style="padding:20px">London</h2>
如果你要同时应用填充到四面八方,你最好只是用padding:20px
作为样式值,因为它减少了代码的大小。
参见使用CSS填充此链接更多的例子:
尝试。你会知道填充是如何工作的。填充是用于在元件(父)的文本/元件定位
<div style="background-color:black;color:white;padding:20px">
<h2 style="border: solid 1px red">London</h2>
</div>
填充:20像素意味着你给20像素填充从右上方左下方。你的意思是填充顶部,填充 - 正确的....而不是填充:正确,填充:顶部等..因此,这不是我的工作。
你的语法是完全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
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>
OR
<h2 style="padding:20px 20px 20px 20px;">London</h2>
或者干脆,
<h2 style="padding:20px;">London</h2>
你的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>
h2{ padding:20px;}`<h2 style="padding:20px">London</h2>`
这是一个非常有用的答案。了解其他形式的填充属性真的帮了我。非常感谢你解释这些!还有一个简单的问题......风格是h2 html元素的一个属性还是只是一个CSS属性? – LP496
这是一个所谓的通用属性,它基本上意味着它可用于所有HTML元素。尽管如此,除了在一些非常特殊的情况下,使用css属性(例如背景图像)必须动态设置以外,被广泛认为是不好的做法。常规的做法是将你的样式放入css样式表的一个css类中,然后通过(又一次)通用的'''''属性将它应用到你的元素中。 – connexo
好的!这现在完全有意义。十分感谢你的帮助! – LP496