Html <；img>；标签

我想创建网站的标题。当我开始创建它时，我注意到文本标记的一个奇怪行为（从

h1

到

p

，

span

等等）。它在文本所在的图像一侧添加空白

标题{
填充顶部：10px；
}
标题.容器流体.第行>*{
高度：8雷姆；
}
标题.徽标>*{
垂直对齐：中间对齐；
}
标题.徽标.img{
身高：100%；
}
标题。标志。标题{
显示：内联块；
左侧填充：0.5雷姆；
}

任何文本都会导致奇怪的行为

填充似乎没问题

所谓的空白是由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>

任何文本都会导致奇怪的行为

删除代码中段落和图像之间的空白：

标题{
填充顶部：10px；
}
标题.容器流体.第行>*{
高度：8雷姆；
}
标题.徽标>*{
垂直对齐：中间对齐；
}
标题.徽标.img{
身高：100%；
}
标题。标志。标题{
显示：内联块；
左侧填充：0.5雷姆；
}

任何文本都会导致奇怪的行为

这与你的

img

和你的HTML在多行上有关。如果你把你的

img

和

p

HTML放在同一行（中间没有空格），它就会消失<代码>img呈现为

显示：内联块默认情况下。
内联块
项的行为类似于句子中的单词，因此它们之间有固有的空白

你可以阅读更多关于它的内容


标题{
填充顶部：10px；
}
标题.容器流体.第行>*{
高度：8雷姆；
}
标题.徽标>*{
垂直对齐：中间对齐；
}
标题.徽标.img{
身高：100%；
}
标题。标志。标题{
显示：内联块；
左侧填充：0.5雷姆；
}

任何文本都会导致奇怪的行为
我猜它来自
标题.logo.title上的
左填充
样式。请提供有关浏览器的信息。如果可能，在浏览器堆栈中重现该问题。这似乎不是一个常见问题。我在
和
标记中尝试了它，但空间仍然存在。为什么会发生这种情况？我个人觉得有点奇怪。@PythonNewbie浏览器在内联元素中呈现空白
img
，它们呈现为
display:inline block默认情况下。
内联块
项的行为类似于句子中的单词，因此它们之间有固有的空白。更多