为什么<span>标记与<div>标记的行为不一样？

Question

为什么圈子不使用span标签,而是使用div标签？ 小提琴

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

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

Answer 1

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

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

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

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