Reputation: 248
div tag will make new line before and after itself.
And
display : none
make this div invisible , and it will not take up any space.
but something makes me confused, see source code:
<p>There is<div style="display:none"></div> a paragraph</p>
I think the result will be :
There is a paragraph
but, the truth is :
There is
a paragraph
what happened?
and with float, I see this problem again ,for example:
<p>this is a paragraph <div style="float:left; background:blue;">something..</div> within a div</p>
expected:
something... this is a paragraph within a div
truth:
this is a paragraph
something... within a div
Upvotes: 1
Views: 1244
Reputation: 71240
According to the W3C HTML4 specs, p
elements cannot contain block level elements, not even another p
.
The P element represents a paragraph. It cannot contain block-level elements (including P itself).
This goes for any block level elements set to display as inline
, or inline-block
- which still remain block level elements in this context (within a p
).
Theres also an interesting comment as to why this may be in the W3C HTML5 specs
The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above*, there are actually five paragraphs as defined by this specification: one before the list, one for each bullet, and one after the list.
*This refers to an example of a p
tag containing a ul
with 5 li
items
Authors wishing to conveniently style such "logical" paragraphs consisting of multiple "structural" paragraphs can use the div element instead of the p element.
Upvotes: 4
Reputation: 944559
div
element inside a paragraph. So your code says:
<p>
Start of paragraph
There is
Text
<div style="display:none"></div>
End of paragraph, start of div, end of div
a paragraph
Text
</p>
End tag for element that isn't open.
The first paragraph is a block, so there is a line break before and after it.
The second set of text is outside that block, so it appears on a new line.
Upvotes: 2
Reputation: 33153
<p>
tags are implicitly closed before the next block level element.
If you inspect the DOM with the browser's dev tools, you'll probably see something like this:
<p>There is</p>
<div style="display:none"></div>
a paragraph
<p></p>
The fact that the block level element (<div>
) has been styled to not display doesn't change the behavior.
Upvotes: 3