<img>标签

Question

我想创建网站标题。当我开始创建它时，我注意到文本标签有一种奇怪的行为（从h1到p，spans等）。它将在文本所在的图像侧面添加空白。

header {
  padding-top: 10px;
}

header .container-fluid .row>* {
  height: 8rem;
}

header .logo>* {
  vertical-align: middle;
}

header .logo .img {
  height: 100%;
}

header .logo .title {
  display: inline-block;
  padding-left: 0.5rem;
}

<header>
  <div class="container-fluid">
    <div class="row">
      <div class="logo col-12 col-md-auto">
        <img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg">
        <p class="title">Any text causes strange behavior</p>
      </div>
    </div>
  </div>
</header>

如果您仍然不明白我在说什么，请看以下屏幕截图：

看到这条蓝线？这就是奇怪的空格。

---

UPD 1：

我将padding-left: 0.5rem;更改为margin-left: 0.5rem;，但是空格仍然在这里。

UPD2：

感谢 Matt Croak 的链接，也找到了解决方案。 解决方法是在font-size:0块中添加logo并设置font-size: initial;或font-size：16px；到header .logo .title。

Answer 1

删除代码中段落和图片之间的空格：

header {
  padding-top: 10px;
}

header .container-fluid .row>* {
  height: 8rem;
}

header .logo>* {
  vertical-align: middle;
}

header .logo .img {
  height: 100%;
}

header .logo .title {
  display: inline-block;
  padding-left: 0.5rem;
}

<header>
  <div class="container-fluid">
    <div class="row">
      <div class="logo col-12 col-md-auto">
        <img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg"><p class="title">Any text causes strange behavior</p>
      </div>
    </div>
  </div>
</header>

Answer 2

这与您的img和HTML处于多行有关。如果将img和p HTML放在同一行（两者之间没有空格），则它会消失。默认情况下，img呈现为display: inline-block;。 inline-block的项目的行为类似于句子中的单词，因此它们之间具有固有的空白。

您可以详细了解here。

header {
  padding-top: 10px;
}

header .container-fluid .row>* {
  height: 8rem;
}

header .logo>* {
  vertical-align: middle;
}

header .logo .img {
  height: 100%;
}

header .logo .title {
  display: inline-block;
  padding-left: 0.5rem;
}

<header>
  <div class="container-fluid">
    <div class="row">
      <div class="logo col-12 col-md-auto">
        <img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg">
        <p class="title">Any text causes strange behavior</p>
      </div>
    </div>
  </div>
</header>

Answer 3

填充似乎还可以。

所谓的空格是由img和p标签之间的空格/换行符引起的。

如果您按照以下方式更改html格式，则空白将消失。

<header>
  <div class="container-fluid">
    <div class="row">
      <div class="logo col-12 col-md-auto">
        <img class="img" src="https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477__340.jpg"><p class="title">Any text causes strange behavior</p>
      </div>
    </div>
  </div>
</header>