p tag includes h1 if inside same section

Question

I've encountered several times this issue and I would like to know why the browsers interpret the header inside the p tag. This breaks the layout as the elements have a margin applied to it, therefore it always needs some adjustments.

If I inspect the element I can see the following: enter image description here

The p tag includes the header as if it was inside the p tag.

If I select the header with the inspector I get the following: enter image description here

The header is only selected. My layout breaks as the margin of the paragraph is making more space above the header. Why does this happen?????

Here below you can see my html which is very simple and clear:

<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>

possible duplicate of [Margin stacks on each other?](http://stackoverflow.com/questions/19782332/margin-stacks-on-each-other) — cimmanon, Nov 28 '13 at 20:42
If I put your HTML into js fiddle then I can't get it to think the header is in the paragraph... http://jsfiddle.net/ZvqWH/. If you can create something on there that exhibits your problem then that would help debug it. I note for a start that the content of the HTML you gave is different from that in your screenshots (the text above it is different). Do you have script or anything like that running to show or hide or otherwise change your content? — Chris, Nov 28 '13 at 20:45
@cimmanon: That isn't what this is about. If you look at the highlighted section it highlights an area of the page that includes the `
` tag and the `
` tag and says that it is a `p` tag. The question is about why the `h1` is included in the `p` when it doesn't appear to. It could be to do with margins if the p had a very large top margin and some kind of positioning that meant the header could be placed over the top margin of the p... But its not just to do with collapsing margins. — Chris, Nov 28 '13 at 20:48

score 1 · Accepted Answer · answered Nov 28 '13 at 20:48

1

You have problem with your CSS. There's nothing wrong with the HTML. You must have applied the style float to your h1 somewhere.

Check the last H1 tag : http://jsfiddle.net/BQp2A/

answered Nov 28 '13 at 20:48

Thanh Trung

3,566
3
31
42

I still have to learn from floating elements... This is as the h1 is taken out from the flow? As position absolute would do. is this right? – Daniel Ramirez-Escudero Nov 28 '13 at 21:15
Yeah. The floating element acts as if it occupy no height at the specified location. To solve that either remove the floating style or put a `clear:both` to the `p` right under. – Thanh Trung Nov 28 '13 at 21:20

p tag includes h1 if inside same section

1 Answers1