從<figure>刪除填充內<header>

我正在做一個練習，我必須創建一個圖像裏面的圖像，這是指您點擊圖片或標題時的主要網站。我已將這兩個文本放在<figure>標記中，但問題在於我已將CSS中的<figure>樣式設置爲頁面中的其他圖片。該樣式具有填充頂部和填充底部值，這會扭曲標題的對齊方式。從<figure>刪除填充內<header>

我可以僅在標頭內刪除<figure>樣式的填充值嗎？這裏是我的代碼：

header { 
    margin-left: auto; 
    margin-right: auto; 
    color: #ffffff; 
    width: 800px; 
    text-align: center; 
    padding: 0px; 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 

figure { 
    padding-bottom: 20px; 
    padding-top: 20px; 
}

HTML：

<header> 
 
    <figure> 
 
    <a href="../index.html"> 
 
     <img src="http://placehold.it/800x150" /> 
 
    </a> 
 
    <h1>Blog de cine</h1> 
 
    </figure> 
 
</header>

而且這是我希望它看起來 previous applying <figure> style

不過這是結果我得到 when applying styles

來源

2016-03-13 Daniel Angel Diz Garcia

好像你需要學習CSS更多.. –

你是如此的正確，我幾乎沒有開始。 –

是的，你可以。它被稱爲後代組合子。

甲後代組合子 - 通常是通過一個單一的空間（）在selector₁selector₂的形式字符 - 表示結合了兩個選擇器使得由所述第二選擇器（selector₂）是匹配元素中選擇的，如果他們有與第一選擇器（選擇器1）匹配的祖先元素。使用後代組合子的選擇器稱爲後代選擇器。

閱讀更多關於它在Mozilla Developer Network。

figure { 
 
    padding: 20px 0; 
 
} 
 

 
header figure { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<header> 
 
<figure> 
 
    <img src="http://i.imgur.com/AzeiaRY.jpg" /> 
 
</figure> 
 
</header> 
 

 
<figure> 
 
    <img src="http://i.imgur.com/AzeiaRY.jpg" /> 
 
</figure>

來源

2016-03-13 14:09:23 Roy

謝謝，它工作！但是填充的「20px」之後的「0」是指什麼？ –

@DanielAngelDizGarcia這是[簡寫]（http://www.sitepoint.com/introduction-css-shorthand/）。在「邊距和填充」標題下有一個快速解釋。 –

再次感謝，似乎是一個非常寶貴的資源 –

CSS選擇更具體的規則有優先權。所以如果你在標題中爲你的數字定義了一個更具體的規則，它會覆蓋另一個。

header figure { 
    padding-bottom: 0; 
    padding-top: 0px; 
}

您也可以添加一個類或id爲相同的效果。

來源

2016-03-13 14:10:14

嘗試

header figure { 
padding: 20px 0; 
margin: 0; 
}

添加到您的CSS

來源

2016-03-13 14:12:33

你錯過了這個問題的關鍵。「只在標題**？」內刪除'

'風格**的填充值。你的CSS從所有'

'元素中移除它。 –

@KirkBeard感謝編輯我的答案 –

使用CSS選擇器來跟蹤下來從header元素figure元素。它使用完成。 header figure。這意味着找到header元素內的所有元素figure。所以寫你的CSS規則，如下圖所示

header figure{ 
    padding:0px; 
}

注：因爲元素被選中更精確地您header figure CSS規則在figure規則獲得更多的優先權。這意味着the more selectors you mention, the more specific you write the selectors the more the priority。

此選擇器也適合你，在這種情況下header > figure，這意味着選擇所有圖元素，它們是頭元素的直接子元素。以上提到的一個header figure會內報頭中的數字元素匹配深任何級別，一樣可以有10個的div，然後在10日的div一個數字標籤，目前仍是CSS的工作，但這種直接孩子將只向下一個級別。

來源

2016-03-13 14:15:08

太感謝你了，很好的解釋。我將在我的CSS中使用它來獲取更多元素。 –

很高興幫助:) –

標題圖方法解決了它，但感謝大家的答案！

來源

2016-03-13 14:30:43

從<figure>刪除填充內<header>

回答

相關問題