h1 旁边的图标，位置为：relative答案

【问题标题】：Icon next to h1 with position:relativeh1 旁边的图标，位置为：relative
【发布时间】：2017-09-21 18:48:24
【问题描述】：

我想在我的标题旁边放一张图片。但问题是我希望这张图片用位置固定：相对。然而，当我修复图像时，它在图像和我的标题之间留出了很大的空间。

<h1 id="htitre"><img src="title.png"/> title </h1>

CSS：

h1
{
    color: rgb(114, 159, 207);
    padding-bottom: 3px;
    border-bottom: 5px solid rgb(114, 159, 207);
    padding-left:0.3cm;
    margin-left: 0.9cm;

}

#htitle img
{

position: relative; 
top: 0.15cm;
right:1.5cm;
border: 1px

}

如何防止图片移动我的标题？

【问题讨论】：

标签： header icons

【解决方案1】：

你想要这样的东西吗？ https://jsfiddle.net/o2mxesua/1/

如果这是您想要的，您只需将 h1 替换为 span，因为 h1 采用整个行宽，然后以您想要的任何方式将字体大小和粗细属性分配给您的 span 类。

这是您的更新代码 -

HTML

<div>
  <img src="title.png"/>
  <span id="htitle">
  title 
  </span> 
</div>

CSS

#htitle
{
    color: rgb(114, 159, 207);
    padding-bottom: 3px;
    border-bottom: 5px solid rgb(114, 159, 207);
    padding-left:0.3cm;
    margin-left: 0.9cm;
    font-size: 4em;
}

#htitle img
{
  position: relative; 
  top: 0.15cm;
  right:1.5cm;
  border: 1px;
}

【讨论】：

不，我想要贴在图片上的标题。我想擦除之间的空间
中间没有空格是什么意思？图像和标题之间的空间是因为您在标题 css 中添加了 margin-left 和 padding-left。将两者都更改为 0 以删除空格。
是的，谢谢。我输入了一个负值并得到了我想要的。再次感谢。我从来没有想过使用跨度。
但是，现在我无法移动图像。比如右：-100cm；什么都不做。