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

Answer 2

Just place a h2 tag at the starting of paragraph. For eg. <p>The p tags are automatically breaking as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!</p> is the para and we want automatically breaking enclosed with h1 tag..

<p><h2></h2>The p tags are <h1>automatically breaking</h1> as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!</p> 

but we cant achieve the style we gave to p tag as p tag automatically breaks.

Note: h1 tag should be styled as

h1{ display:inline; !important}