CODEWITHSUNDEEP
htmlcss
Blake Gibbs
Blake Gibbs

Reputation: 495

Why doesn't the <span> tag behave the same as a <div> tag?

Why doesn't the circle appear using a span tag, but does with a div tag? FIddle

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

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

Upvotes: 0

Views: 63

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Because span is an inline element and inline elements cannot be given a specific height.

However, you can make an inline element accept a height by making it an inline-block or block level element.

.circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
}
.red {
    background: red;
}
<span class="circle red"></span>
<div class="circle red"></div>

Upvotes: 5

Related Questions