html - h1 标签的高度有问题，似乎是从另一个对象继承的

Question

我真的无法解释我的问题所以这里是一个例子:

如果您检查第一个 <h1>标记你会注意到它的高度是从另一个对象继承的。我想解决这个问题......

.wrapper {
	width: 1300px;
	margin: 0 auto;
	text-align: center;
}

.feed {
	width: 950px;
	height: 800px;
	border-right: 2px solid #f0f0f0;
}

.videoContainer {
	background-color: #fafafa;
	width: 950px;
	height: 450px;
	text-align: center;
	display: inline-block;
	float: left;
}

#videoTitle {
    margin: 0;
	color: #333;
	font-size: 22px;
	font-family: Arial, sans-serif;
}

<div class="wrapper">
    <div class="content">
                <div class="feed">
                    <div class="videoContainer"><iframe width="800" height="450" src="https://www.youtube.com/embed/8GpDXV9BfLU" frameborder="0" allowfullscreen></iframe></div>
                    <h1 id="videoTitle">Something here</h1>
                    <h1 id="videoTitle">Something lorem ipsum.. To make this text a bit longer than the previous one.</h1>
                    <h1 id="videoTitle">and something short.</h1>
                </div>
    </div>
</div>

有什么想法吗？谢谢。

Answer 1

添加clear: left;到 <h1> .目前它的高度为.videoContainer因为 float: left;在上面。