带有h1标签的额外空间

Question

在h1标记上方添加p标记时，空间未知。

以下是 fiddle

我需要的是下面的图片

---

在考虑float:left之后，我在我的真实页面中尝试了它，但它仍然存在问题

以下是float:left

的新代码

Fiddle with float

Answer 1

那是因为你已经给你的thumb课程（这是你的形象）高度为100px。只需删除该高度即可修复它，请参阅小提琴：http://jsfiddle.net/CKRNs/4/

编辑：正如您所说，您希望图片旁边有p标记，请将float: left加到p标记和{ {1}}类，如此：http://jsfiddle.net/CKRNs/6/

Answer 2

用于浮动并移除display inline-block;

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

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

<强> Demo

Answer 3

问题：display:inline-block;

的使用不正确

解决方案：删除所有display:inline-block;和vertical-align:top;次出现并提供.thumb float:left;（正确对齐彼此旁边的块元素的方法）

示例：http://jsfiddle.net/CKRNs/9/

Answer 4

为float:left;，p和h1定义添加.thumb。

Answer 5

您需要设置图片float:left。请参阅此演示：http://jsfiddle.net/CKRNs/14/

Answer 6

.thumb{
    display:inline-block;
    height:100px;
        float:left; 
}

这意味着图像将向左浮动并允许文本换行

Answer 7

我会在拇指上使用绝对位置。并将margin-left放在h1和p标签上。 http://jsfiddle.net/CKRNs/13/

h1, p{
margin: 0 0 0 60px; 
}

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