CSSでmarginやpaddingが効かない

Question

実際のサイト（こちらを見てください）

<div class="balloon-left">
<div class="bln-img img-circle float-l"><img src="./img/user1.png" align="left"><div class="bln-name">名前</div></div>
<div class="bln balloon1">
<p class="img-l">&nbsp;</p>
<div class="b_body">
<p>ここにテキストが表示されます。</p>
</div>
</div>
</div>

.bln-img img（顔画像）と.bln-name（名前）の距離を離したいのですが、padding-topやmargin-topが間に効かず、画像の上部に追加されてしまいます。

.bln-name {
    padding-top: 5px;
    margin-top: 5px;
}

.bln-nameをdisplay: inline-block;にすると効きましたが英語で名前を記入すると改行されずに.bln-imgから突き出てしまいます。
解決法を教えてください。宜しくお願い致します。

Answer 1

多分親要素の float が原因では。

.bln-name {
    font-size: 11px;
    font-weight: bold;
    padding-top: 5px; /* ADD */
    /*margin-top: 5px;*/
    color: #666;
    clear: both; /* ADD */
}

Comments

[snof]

まったくその通りでした。ありがとうございます。