CODEWITHSUNDEEP
htmlcss
Oto Shavadze
Oto Shavadze

Reputation: 42753

span tag with and without content works differently

I have html code:

<ul>
     <li><span class="a">aaa</span><span class="b">bbb</span></li>
     <li><span class="a">aaa</span><span class="b">bbb</span></li>
     <li><span class="a">aaa</span><span class="b">bbb</span></li>
</ul>

and css:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


.a {
    width: 100px;
    height: 60px;
    display: inline-block;
    background-color: #900;
}

.b {
    width: 100px;
    height: 60px;
    display: inline-block;
    background-color: #009;
}

Works fine if in both spans (class="a" and class="b") are some content writed.

If remove text from span class="b", now result is not desirable

http://jsfiddle.net/hm3sh/1/

Tell please why this happened ?

Upvotes: 2

Views: 226

Answers (4)

ashgkwd
ashgkwd

Reputation: 195

i tried to experiment with different situations after adding :

.a {
....
float:left;
....
}

it works well, specially with margin & padding set to 0 in ul {.... i know there are other solutions but i think this one is minimal possible.

Upvotes: 0

Shaun O&#39;C
Shaun O&#39;C

Reputation: 16

Try putting float:left; into span class a

http://jsfiddle.net/hm3sh/7/

Upvotes: 0

Toon Casteele
Toon Casteele

Reputation: 2579

This works fine for me: http://jsfiddle.net/hm3sh/4/

.a {
    width: 100px;
    height: 60px;
    float: left;
    clear: both;
    background-color: #900;
}

.b {
    width: 100px;
    height: 60px;
    background-color: #009;
    display: block;
    float: left;
}

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191729

Add vertical-align: top to both spans; this should make them work as desired even if both have no content.

http://jsfiddle.net/ExplosionPIlls/hm3sh/2/

Upvotes: 3

Related Questions