如果在同一部分内，p标签包括h1

Question

我多次遇到过这个问题，我想知道为什么浏览器会解释header标记内的p。这会打破布局，因为元素应用了边距，因此总是需要进行一些调整。

如果我检查元素，我可以看到以下内容：

p标记包含标题，就像它位于p标记内一样。

如果我使用检查器选择标题，我会得到以下内容：

仅选择标题。我的布局中断了，因为段落的边距在标题上方留出了更多空间。为什么会这样？?????

下面你可以看到我的html非常简单明了：

<section class="content">
    <h1>Meet Sophie, our unique vision for design speakers</h1>
    <p>Are you looking for high-performance design speakers that can provide a truly mesmerizing sound experience? If so, B.A.S. has the answer. We believe that speakers should create a comprehensive atmosphere. That’s why we design speakers that have the power to capture the imagination – both aurally and visually.
    </p>
    <p>Sophie is our first innovation, a set of thin-bodied design speakers with voluptuous curves and a remarkably strong voice. Explore our versatile sets and meet the beauty of sound in person.
    </p>
    <h1>The DD set: design speakers for studios and events</h1>
    <p>Ever the optimal choice for studios, events and large spaces, our Sophie DD set consists of two perfectly balanced, artistic design speakers paired with two powerful subwoofers. Whether you’re mixing, recording, performing or simply listening, these design speakers will always leave a lasting impression with any audience that hears and sees them.
    <br>
    [Explore the possibilities of our professional design speakers]
    </p>
    <h1>The DS-set: design speakers for powerful, centralized sound</h1>
    <p>Dedicated spaces deserve dedicated sound. With the DS set of Sophie design speakers, you’ll be able to create a comprehensive experience in a wide range of specific scenarios – from listening rooms and media rooms to professional presentations, the twin Sophie design speakers and their single subwoofer companion will easily create the perfect soundscape.
    <br>
    [Create beautiful soundscapes with our versatile design speakers]
    </p>
</section>

Answer 1

你的CSS有问题。 HTML没有任何问题。您必须已将样式float应用于某个地方的h1。

检查最后一个H1标签：http://jsfiddle.net/BQp2A/