时间戳

首页 > 解决方案 > 我可以问一个关于内联和块的问题吗，我试过了，但我没有找到答案

html - 我可以问一个关于内联和块的问题吗，我试过了，但我没有找到答案

问题描述

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

当我<p>用“display:inline;”添加一个 段落和图像在同一行（如下所示）

但是当我将另一个<p>与“display：inline;”一起使用时 作为早期的容器<p>，段落就像一个块元素并向下推，<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">

对不起，我不能发布结果，我没有太多的声誉。

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

标签： htmlcssblockinline

解决方案

在这种情况下，由于禁止嵌套<p>，第一个<p style="display:inline">将被“固定”并立即关闭，第二个</p>将同样通过插入打开标签来“固定”；所以生成的 DOM 将是：

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

第二个<p>不会应用任何样式，因此将显示为block. 这会压低你的形象。

推荐阅读