inline-block和run-in的区别_arachni扫描报错原因block in run-优快云博客

本文链接：https://blog.youkuaiyun.com/why_fly/article/details/15676511

本文详细介绍了inline-block和run-in元素的区别，包括它们如何影响元素的显示方式，以及在不同场景下的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display的两个属性值inline-block和run-in，这两者之间的区别。

首先是inline-block，它是行内块元素，与它前一个元素的显示角色有关。如果它之前的的元素是块级元素的话，那它也将表现为块级元素；如果它之前的元素表现得是行内元素，则它也表示为行内元素。说白了就是，设置为inline-block的元素的显示效果和它前一个元素的表现一致,，与后一个元素的表现形式无关。

html code：（前一个为块级元素时）

<div>这是块级元素,查看效果</div>

<span>这个设置了inline-block</span>

css code:

div{
    background:yellow;
    width:100px;
    margin-bottom:10px;
}
span{
    display:inline-block;
    background:blue;
}

效果：

html code:（前个元素是行内元素时）

<span>这个是行内元素，查看效果</span>
<div>设置为inline-block</div>

css code:

span{
    background:yellow;
}
div{
    display:inline-block;
    background:red;
}

效果：

以上就是inline-block的一些知识。

接下来看看run-in是怎么工作的；

run-in也是一个有意思的行内块级元素，不过它与inline-block的表现是完全不同的。它的表现与它的后一个直接元素直接挂钩。如果它的后一个直接元素是块级元素的话，它会表现为行内元素插入到该块级元素中；如果它的后一个元素是行内元素的话，它就会表现为块级元素，坦白的讲就是跟后一个元素的表现是完全相反的,最后，它跟前一个元素的表现形式是无关的。

html code :(后一个元素是块级元素时)

<div class="box_1">设置为run-in，查看效果</div>
<div class="box_2">这个是块级元素元素</div>

css code:

.box_1{
    display:run-in;
    background:red;
}

效果：

但是在firefox上显示却和chrome上的效果不是一样的，可能是浏览器的支持问题吧。

html code：（后一个元素是行内元素时）

<div class="box_1">设置为run-in，查看效果</div>
<span>这个是行内元素</span>

css code:

.box_1{
    display:run-in;
}

效果：