Question

HTML is

<div class="jfmfs-friend-container">
    <div class="jfmfs-friend  ">
        <input class="friend-checkbox" type="checkbox">
        <img src="/picture">
        <div class="friend-name">Test User</div>
    </div>
</div>

Here I am able to achieve all three elements checkbox, img and friend-name div in a single line. I am looking for following:

1. checkbox and friend-name in verticall middle to the img.
2. Word wrap in the friend-name div
3. All elements with equal distance (atleast 5px) to each other. Right now all 3 are adjacent to each other with no space

Here is my CSS. I am giving css code for the parent div incase of any display:block property:

.jfmfs-friend div {
    color:#111111;
    font-size:11px;
    overflow:hidden;
    display:inline-block;
}

div.friend-name  {
    margin-left: 10px;
    vertical-align: middle;
    word-wrap: break-word;
}

.friend-checkbox {
    position: relative;
    vertical-align:middle;
    display: inline-block;
}

#jfmfs-friend-container {
    overflow:scroll;
    overflow-x: hidden;
    -ms-overflow-x: hidden;
    width:100%;
    height:400px;  
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    color: #333;
    font-size: 12px;
}

Answer 1

Demo: http://jsfiddle.net/55twK/

1. Set vertical-align:middle to all three elements, now you miss img.
2. Now all three elements works like inline elements and if there will be more text div can wrap itself to the new line. So one of the options is to set width or max-width to the div.
3. Horisontal margins and paddings works fine for inline elements.