html - <h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)

Question

I'm trying to have <hx> tags inside paragraphs, like:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar tincidunt neque, at blandit leo mattis vitae. Cras <h2>placerat</h2> justo vel risus porta cursus. Nullam eget sem nibh. Sed <h3>mattis</h3> facilisis rhoncus. Morbi sit amet nisl lectus.</p>

But I always get a line break before each one of them, even applying all these, and combinations of the following declarations:

h1, h2, h3, h4, h5, h6 {
display:inline !important;
text-transform:none;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
clear:none;
color:inherit;
margin:0;
padding:0;
}

So what can I do so that the tags go unnoticed inline with the text? Right now I get something like

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar tincidunt neque, at blandit leo mattis vitae. Cras

placerat justo vel risus porta cursus. Nullam eget sem nibh. Sed

mattis facilisis rhoncus. Morbi sit amet nisl lectus.

Thank you

PS: btw I'm using blueprint framework theme for drupal.

Answer 1

You're misusing the header tags.

You should use <span> tags with CSS classes.

I tried it out, and what's happening is that when Firefox sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Firebug.