从<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>

回答

相关问题