CODEWITHSUNDEEP
htmlcss
Pavel Straka
Pavel Straka

Reputation: 427

CSS - non-breaking space between img and text

I would like to ask for help with this task: I would like to have a non-breaking-space between img and a piece of text. But the problem is, that sometimes the line between image and text breaks up even if the non-breaking-space appears. Where am I wrong?

Here is the JsFiddle: https://jsfiddle.net/cj7Lp1vy/9/

HTML

<div id="parent">
    <div id="child">
        <!-- some content -->
        <div class="cl">
            <img src="obrazky/plocha.png">&nbsp;Plocha: 11 m<sup>2</sup>
            <img src="obrazky/pocet_pokoju.png">&nbsp;Pokoje: 2
            <img src="obrazky/rekonstrukce.png">&nbsp;Rekonstrukce: ne
            <img src="obrazky/okna.png">&nbsp;Okna: stará
            <img src="obrazky/topeni.png">&nbsp;Topení: dřevo
            <img src="obrazky/typ_stavby.png">&nbsp;Typ stavby: dřevo            
        </div>
    </div> 
</div>

CSS

#parent {
    width:235px;
    min-height:110px;
    border:1px solid #CCCCCC;
    padding:15px 10px 10px 10px;
    margin:0px 12px 24px 12px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#child {
    position:relative;
}
.cl {
    clear:both;
}
img {
    border:1px solid red;
    width:16px;
}

Upvotes: 1

Views: 2540

Answers (1)

Alohci
Alohci

Reputation: 82976

You're going wrong because the Unicode specification for NBSP says that there shouldn't be a line break after the character. it doesn't stop there being one before the character.

To work around this, wrap the <img> and the &nbsp; in a span and give the span the styling white-space:nowrap;

Upvotes: 5

Related Questions