内嵌子元素后<p>标签文本样式失效问题咨询

这是因为HTML规范明确禁止在<p>元素内嵌套块级元素（比如<div>就是块级元素），浏览器会自动修正不符合规范的代码，导致你的结构被拆分。

浏览器实际渲染的代码结构 #

你写的原始HTML：

<p>
  Text is styled according to the stylesheet.
  <div></div>
  Text loses its styling.
</p>

会被浏览器自动拆分成：

<p>
  Text is styled according to the stylesheet.
</p>
<div></div>
<p>
  Text loses its styling.
</p>

可以看到，"Text loses its styling."这段文本已经不在初始的<p>标签里了，自然不会应用你给p定义的font-size:20px样式。

解决思路 #

• 插入图片直接用<img>标签即可，<img>属于行内替换元素，完全可以放在<p>内部，不会破坏结构
• 如果需要用容器包裹内容，把<div>换成<span>这类行内元素，或者将外层的<p>替换成<div>来支持块级元素嵌套

内容的提问来源于stack exchange，提问作者Avarage cat enjoyer