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

Question

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

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

p 标签包含 header ，就像它在 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/