Html 带有h1标记的额外空间

在

p

标记上方添加

h1

标记时，存在未知空格

这是

我需要的是下图

---

在考虑了

float:left

之后，我在我的真实页面中尝试了它，但它仍然给出了问题

这是带有

float:left的新代码

这是因为你给你的
大拇指
类（这是你的图像）一个100px的高度。只需移除该高度即可修复，请参见Fiddle:

编辑：正如您所说，您希望图像旁边有
p
标记，将
float:left
添加到
p
标记和
thumb
类中，如下所示：
添加一个
float:left到
p
、
h1
和
.thumb
定义。
您需要设置图像
浮动：左
。请参阅此演示：

这意味着图像将向左浮动，并允许文本环绕用于浮动的并移除
显示内联块

   p {
        width: 80%;
        vertical-align: top; margin:0 
    }
    h1{
        font-size:14px; 
        margin:0; 
        vertical-align:top;

    }
    .thumb{
    float:left;
        height:100px    
    }

问题：错误使用
显示：内联块

   p {
        width: 80%;
        vertical-align: top; margin:0 
    }
    h1{
        font-size:14px; 
        margin:0; 
        vertical-align:top;

    }
    .thumb{
    float:left;
        height:100px    
    }

解决方案：删除所有
显示：内联块和
垂直对齐：顶部发生并给出
.thumb
浮动：左（对齐相邻块元素的正确方法）

示例：
我会使用拇指的绝对位置。并将边距放在h1和p标签的左边

这不是小提琴对我的排列方式：，你是在说拇指造成的间隙吗？更像是这样吗？否则我真的不明白。@PeeHaa Fiddle有问题陈述。我需要像我在图像中所显示的那样的输出。HI@Sowmya用于浮动我需要p标记从h1标记的正下方开始，它在所附图像中的显示方式，但在我的ral页面中它不工作..：（将在2分钟内发布完整代码。请look@Sowmya好的，请在发布时通知我。@Sowmya看到这一点，您错过了图像标记中的
class=“thumb”
。如果您希望图像变小，请选择
thumb
class:）的高度，但p标记文本仍然不完全在h1文本的下方，对吗（选中此处，您可能还希望删除拇指的高度，以使文本在图像上流动。@WouterJ我需要pa标记文本从h1文本的正下方开始。在您的小提琴中，它显示在h1旁边tag@Sowmya你是什么意思？小提琴就是你的形象，不是吗？我不想看到你小提琴的不同之处。这是确切的演示。无论如何，感谢你的努力和回答。：）@哦，我现在明白了。你还不明白我的答案。我说你只需要在
选择器中添加
float:left；
。thumb
选择器，而不是
h1
和
p
。请查看@编辑过的问题。我添加了float:left，但这仍然是个问题，但你在这方面做了什么改变？从h1中删除了float？？
h1, p{
margin: 0 0 0 60px; 
}

.thumb{
  position:absolute;
  width:50px;
  height:50px;
}