从<header>内的<figure>中删除填充

Question

我正在做一个练习，我必须在里面创建一个带有图像的标题，当您点击图片或标题时，它指的是主网站。我已将文本放在<figure>标记内，但问题是我在CSS中为页面中的其他图片设置了<figure>样式。该样式具有填充顶部和填充底部值，扭曲了标题的对齐方式。

我是否可以仅在标题内删除<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>

这就是我想要的样子

但这是我得到的结果

Answer 1

是的，你可以。它被称为后代组合。

  

后代组合 - 通常由单个空格（）表示   选择器2选择器2形式的字符 - 组合两个选择器   这样与第二选择器（选择器2）匹配的元素是   如果它们具有与第一个选择器匹配的祖先元素，则选择它们   （selector₁）。调用使用后代组合子的选择器   后代选择器。

在Mozilla Developer Network了解详情。

b = 1

figure {
  padding: 20px 0;
}

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

Answer 2

使用CSS选择器跟踪figure元素中的header元素。它完成使用。 header figure。这意味着找到figure元素中header的所有元素。所以写下你的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，这意味着选择所有figure元素作为header元素的直接子元素。上面提到的一个header figure会将标题内部的数字元素与任何级别的深度相匹配，就像你可以有10个div，然后是第10个div中的一个数字标记，但CSS仍可以工作，但这个直接的孩子只会工作一级下来。

Answer 3

CSS选择具有优先权的更具体的规则。因此，如果您在标题内为图形定义更具体的规则，它将覆盖另一个。

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

您也可以为同一效果添加一个类或ID。

Answer 4

尝试添加

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

到你的CSS