Question

<img>是内联块元素（或可能是

）

当我添加带有{display：inline;“的时段落和图片在同一行（如下所示）

但是当我将另一个与“ display：inline;”一起使用时作为较早版本的容器，尽管容器和子级都是内联的，但该段落的作用类似于块元素，并将<img>向下推。

有人知道为什么吗？

这是我的代码行（这只是测试代码，因此没有任何用处）

    <p style="display:inline;" ><p style="display:inline;">
    asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
    </p></p>
    
    <img 
    src="https://www.thoughtco.com/thmb/4Bov5m2EOPlY5x6KwWNGgmefhhc=/768x0/
    filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/
    LionelMessiBarcelona-5898d9fe3df78caebca7ac0d.jpg" alt="ronaldo">

抱歉，我无法发布结果，我的声誉不高。

注意：如果我用“ display：inline;”将容器或容器和子容器都替换为<div>，则不会出现此结果。如果我用其他内联元素替换它们，仍然不会发生。

Answer 1

在这种情况下，由于禁止嵌套，第一个将被“固定”并立即关闭，而第二个将类似地被“固定”插入一个开放标签；所以最终的DOM将是：

<p style="display:inline"></p>
<p style="display:inline">...</p>
<p></p>
<img>

第二个将不会应用任何样式，因此将显示为block。这将降低您的图像。

我可以问一个有关内联和阻止的问题，我曾尝试过，但没有找到答案

1 个答案: