Why

Nested In Leads For A Block Element? - Stack Overflow

Just browsing Stack Overflow? Help us improve your experience. Sign up for research

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Why <p> nested in <span> leads for a block element? Ask Question Asked 6 years, 4 months ago Modified 6 years, 4 months ago Viewed 2k times 3

As <span> is an inline element and <p> is a block element I cannot understand how nesting a <p> element inside a <span> element will result with a block element. Here is my example:

div { background-color: cyan; border: solid; } p { border: solid; } <div> <span><p>STACK OVERFLOW</p> </span> <span><p>STACK OVERFLOW</p></span> <span><p>STACK OVERFLOW</p></span> </div>

• html
• css

Share Improve this question Follow edited Jul 17, 2018 at 10:15 Temani Afif 270k2828 gold badges359359 silver badges475475 bronze badges asked Jul 17, 2018 at 10:09 Tal RofeTal Rofe 1,72433 gold badges2222 silver badges6464 bronze badges 5

• Types are not inherited, so when you nest a block element inside an inline one, they will remain as they were. So, your span is still inline, but p inside is not and thus it gives the impression you are getting. – Tomek Buszewski Commented Jul 17, 2018 at 10:12
• @B001ᛦ: That question does not appear to address the CSS aspect of this one. – BoltClock Commented Jul 17, 2018 at 10:12
• @BoltClock yea got it.. thx – B001ᛦ Commented Jul 17, 2018 at 10:14
• a hint : add some style to the span and what is happening – Temani Afif Commented Jul 17, 2018 at 10:15
• 1 This is probably the most suitable duplicate I could find: stackoverflow.com/questions/27413095/… (I answered this as well but the "custom element" in the title is a red herring and is unrelated to the issue.) – BoltClock Commented Jul 17, 2018 at 10:18

Add a comment |

1 Answer 1

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 4

You simply cannot nest a p element inside a span element. The span element's content model should be phrasing content, which excludes elements such as p and heading elements. Since the span element's end tag is not omissible (i.e. it is required), the p element's start tag does not implicitly close the span element, so you get a validation error. However, browsers try to recover from the error, and they still render the p element as a block element.

To avoid this type of error in the future, I recommend validating HTML code using the W3C's HTML Validator and consulting the consulting the HTML5 specification (or a similar reference) about content models.

Share Improve this answer Follow answered Jul 17, 2018 at 10:19 TsundokuTsundoku 2,67811 gold badge2020 silver badges3232 bronze badges 2

• While this is true, this does not address why the elements are laid out the way they are. Swap the span and p such that the p becomes the parent, apply display: inline to the p and display: block to the span, and the resulting layout is identical. – BoltClock Commented Jul 17, 2018 at 10:21
• 2 On closer inspection I think I see how it does address the question - "why does putting a p in a span result in a block?" "The browser renders the p through error recovery even though a p may not legally appear in the context of a span." – BoltClock Commented Jul 17, 2018 at 10:28

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css

or ask your own question.

• The Overflow Blog
• “You don’t want to be that person”: What security teams need to understand...
• Featured on Meta
• We’re (finally!) going to the cloud!
• Updates to the 2024 Q4 Community Asks Sprint

Linked

662 What is the difference between display: inline and display: inline-block? 2 block <a> inside inline <li> behaviour 3 What goes wrong when a display:inline custom element contains display:block elements?

Related

40 Is <p> a block-level or inline-level element? 71 Nesting block level elements inside the <p> tag... right or wrong? 3 Browser splits up <p> and nested <code> blocks that contain nested <p> blocks. Why? 6 Why appear <p> tag around <img> tag? 0 Why does <p> put space outside of <div>? 0 Why does <p> element jump out of div and appear in next line below? 0 Why does block add one more in overlapped P tags? 3 Nested <span> inside a <p> tag giving different font size 5 Why is block level element contained inside inline-block level element displayed as inline? 0 Why is a span tag adding a big space before its contents in a p tag?

Hot Network Questions

• If someone falsely claims to have a Ph.D. on the jacket of a book and they profit from that claim, is that criminal fraud?
• Are pigs effective intermediate hosts of new viruses, due to being susceptible to human and avian influenza viruses?
• An almost steam-punk short fiction about robot childcarers
• Romans 11:26 reads “In this way all of Israel will be saved;” but in which way?
• How to permute p-values?
• How do we determine our actual degree of belief?
• A Pandigital Multiplication
• A giant wall in the middle of the ocean that splits the world in two
• Law of conservation of energy with gravitational waves
• Is it possible to explicitly say “the restaurant that I'm eating” in Japanese?
• How do mathematical realists explain the applicability and effectiveness of mathematics in physics?
• What did Gell‐Mann dislike about Feynman’s book?
• Difficulty with "A new elementary proof of the Prime Number Theorem" by Richter
• How the size of a rule is connected with the box before/after it?
• Why can't we say “How hard is to earn money”?
• EFT operator basis
• Least unsafe (?) way to improve upon an existing (!) network cable running next to AC power in underground PVC conduit?
• Convincing the contrapositive is equivalent
• What is the origin of "Jingle Bells, Batman Smells?"
• Is it possible that the committee contacts only one reference while applicants need to provide two?
• Bash script that waits until GPU is free
• How do I view my notification history on iOS?
• Is it appropriate to reach out to executives and/or engineers at a company to express interest in a position?
• How manage inventory discrepancies due to measurement errors in warehouse management systems

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html