将标题文本的位置设置在CSS中的其他内容的正上方

Question

此问题与提到的here主题有关。 我设法修复了我之前的CSS代码，以获得将文本对齐到图片中间的效果，但现在我想在文本中添加标题。我的问题是我在调整标题方面遇到了麻烦，目前它看起来像这样：https://jsfiddle.net/u8db2j75/，但我希望达到这样的效果：http://i.imgur.com/fFuohml.png其中标题文本正好位于普通文本的正上方。我不知道为什么在我的解决方案中，标题和文本之间存在巨大差距。你能帮我解决一下我的问题吗？我目前的css代码如下：

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  max-width: 60rem;
  /* 960 */
  margin: 0 auto;
}
.item {
  width: 100%;
  overflow: hidden;
  margin-bottom: 5rem;
  display:table;
  /* 80 */
}
.item__img,
.item__info {
  width: 50%;
  display:table-cell;
  vertical-align:middle;
}
.item__img {} .item__img .img-map {
  width: 95%;
  height: 18.750rem;
  /* 300 */
}
.item__img img {
  width: 95%;
  height: 18.750rem;
  /* 300 */
}
h2 {
    font-weight: normal;
    font-size: 4rem;
    /* 64 */
    text-align: left;
}

和当前的HTML代码是这样的：

<div class="container" role="main">

  <article class="item">

    <div class="item__img">
      <div class="img-map">
        <img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" />
      </div>
    </div>
    <div class="item__info">
    <h2>HEADER</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sodales orci. Praesent sit amet consequat purus. Praesent lobortis mi quis rutrum fringilla. Phasellus velit arcu, ultricies vestibulum varius sed, convallis ut eros. Vestibulum
        vel congue felis, ut lacinia tellus. Integer ullamcorper gravida ligula non convallis. Ut suscipit vulputate erat eu porttitor. Morbi sagittis vulputate bibendum. Aliquam ultricies finibus tortor, a elementum nisl aliquet at. In sed dui id mauris
        rutrum ornare.</p>
    </div>

  </article>
</div>

谢谢！

Answer 1

答案就在于我在上一个问题上给出的答案。因为浏览器会应用它自己的样式表，所以间距会很大。

这是firefox添加的内容：

h2, *:-moz-any(article, aside, nav, section) h1 {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.83em 0;
}

您只需要添加一个覆盖边距的样式。

正如我之前提到的，您可以在Google Chrome中使用开发者控制台，也可以将Firebug添加到Firefox中。这样，您只需按F12键即可查看页面上哪些元素应用了哪些样式。

Answer 2

你必须减少h2（53px）的底部边缘和

（16px）的上边距

h2 {
    font-weight: normal;
    font-size: 4rem;
    /* 64 */
    text-align: left;
margin-bottom: 0px;
}
p{
    margin-top: 2px;
}

Answer 3

检查代码，您会看到适用于<h2>的保证金：

这是由默认的CSS值引起的。

非常建议您添加* {padding: 0; margin: 0;}以禁用每个元素的默认填充/边距，然后您就可以根据需要添加自己的边距/填充。

Answer 4

如果标题后跟一个段落，则（通常）不超过4个样式声明会在标题和段落之间创建可见的垂直间隙。这4个样式声明是（按顺序）：

1）标题的padding-bottom;

2）标题的margin-bottom;

3）段落的margin-top;

4）段落的padding-top;

使用更高级的布局，line-height等声明也会发挥作用，但我们暂时不用担心这个问题。

因此，如果您想确保第二级标题与其后的段落之间没有明显的间隙，您可以声明以下规则：

h2 {
margin-bottom: 0;
padding-bottom: 0;
}

p {
margin-top: 0;
padding-top: 0;
}

当然，如果我们将其留在那里，上面段落的样式规则将适用于所有段落。如果我们希望这些样式规则仅将 应用于紧跟<h2>的段落，那么我们可以通过声明来使上面的样式更加明确：

h2 {
margin-bottom: 0;
padding-bottom: 0;
}

h2 + p {
margin-top: 0;
padding-top: 0;
}

上面的+选择器表示规则仅适用于选择器之后的元素，当它是紧跟在选择器元素之前的元素的兄弟之后

现在<h2>和<p>之间的可见差距为零，您可以根据需要调整边距和填充。