为什么<span>标记的行为与<div>标记相同？</div> </span>

Question

为什么圈子不是使用span标签显示，而是使用div标签？ FIddle

<span class="circle red"></span>
<div class="circle red"></div>

.circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}
.red {
    background: red;
}

Answer 1

因为span是内联元素，并且内联元素不能赋予特定高度。

但是，您可以通过使内联元素成为内联块或块级元素来使内联元素接受高度。

＆＃13;

＆＃13;

.circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
}
.red {
    background: red;
}

＆＃13;

<span class="circle red"></span>
<div class="circle red"></div>

＆＃13;

＆＃13;

＆＃13;