Constantine Constantine -5 years ago 88
HTML Question

Text inside <p> after line break <br> ignores css for <p> tag if heading is also present

My goal is to have headings be inline with the text inside of a

tag... all of which have a
to the padding of the container

I have the following html code

<div id='homeContent'>
<!-- other headings and content here -->

<p><h3>Heading</h3> some text</br> more text</p>

<!-- other headings and content here -->

with the following CSS

#homeContent h3, #homeContent h4, #homeContent p {
z-index: 0;
margin: 0px 16px;
padding-top: 8px;

#homeContent h3, #homeContent h4 {
display: inline;
#homeContent {
padding: 0px 16px;
margin: 32px 0px;

Here is what I want to happen (considering the code block to be the container border)

H3 HEADING some text
more text here

Here is what I'm actually getting

H3 HEADING some text
more text here <-- notice here the text does not respect the margin given to the <p> tag

Now if I take the heading tag out of the paragraph tag, the paragraph text behaves correctly, but obviously does not appear inline with the heading, which is the goal.

Answer Source

First of all, you cannot have any block level elements inside <p> tag. Even if your code has:

<p><h3>Heading</h3> some text</br> more text</p>

It renders like this in the browsers:

Browser Dev

So, it is better to use correct code like:

<p> some text</br> more text</p>

And style it using CSS.

Paragraph and Headings are two different animals. According to what you need in the comments, I would recommend this markup:

h3 {color: red;}
h3 span {font-weight: normal; font-size: 0.8em;}
<h3>Heading <span>some text</br> more text</span></h3>

And further to your comments, I could find that you wanna make your <h3> and <p> inline running contents. I would suggest to keep the above markup and use the following CSS:

h3, h3 + p {display: inline-block; /* Or inline */}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download