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

回答

相關問題