Unable to create vertical space between <LI> Items

Question

For some unknown reasons I am not being able to space between vertical li entries. Code Below:

Screen Shot

HTML

<div id="listing">
    <ul id="entries">
        <li class="entry">
            <div>
                <div class="image">
                    <img  width="100" height="100" src="http://neword.blog.com/files/2011/01/smartphone.jpg" alt=""/>
                </div>
                <div class="text">
                    <span class="title">Google patents 'creepy' internet toys to run the home</span>
                     <span class="author">by <span class="name"><a href="">Adnan</a></span></span>
                    <span class="hi">
                        Google's R&D team has looked into making internet-connected toys that control smart home appliances.
                    </span>
                </div>
            </div>
        </li>
        <li class="entry">
            <div>
                <div class="image">
                    <img  width="100" height="100" src="http://neword.blog.com/files/2011/01/smartphone.jpg" alt=""/>
                </div>
                <div class="text">
                    <span class="title">Google patents 'creepy' internet toys to run the home</span>
                     <span class="author">by <span class="name"><a href="">Adnan</a></span></span>
                    <span class="hi">
                        Google's R&D team has looked into making internet-connected toys that control smart home appliances.
                    </span>
                </div>
            </div>
        </li>
    </ul>
</div>

CSS

html,body
{
    padding: 0;
    margin: 0;
    font-family: "Georgia", Times, serif;
    background-color: #f6f7f7;
}
a
{
    text-decoration: none;
    color: #373d39;

}
a:hover
{
    text-decoration: underline;
}
#container
{
    padding: 1%;
}
#container header
{
    margin-top: 10%;
    margin-left: 38%;
}
#container header h2
{
    margin-left: 5%;
    font-family: times, Times New Roman, times-roman, georgia, serif;
    color: #444;
    margin: 0;
    padding: 0px 0px 6px 0px;
    font-size: 51px;
    line-height: 44px;
    letter-spacing: -2px;
    font-weight: bold;
}
#container nav
{
    display: block;
    float: right;
    margin-right: 3%;
    width: 20%;
}
#container nav a
{
    margin-right: 5%;
}
#container #content
{
    margin: 5%;
    padding: 1%;
}
#container #listing
{
    margin-top: 5%;
}
#container #listing ul
{
    padding: 0;
    list-style: none;
}

.entry
{
    margin-top: 10px;
    border:1px solid grey;
}
#container #listing ul .entry .image
{
    float: left;
    background-color: #008000;
}
#container #listing ul .entry .text
{
    float: left;
    margin-left: 1%;
}
#container #listing ul .entry .text .title
{
    display: block;
    font-size: 1.2em;
    font-weight: bold;
}
#container #listing ul .entry .text .author
{
    font-size: small;
}
#container #listing ul .entry .text .author .name
{
    color: #a4a7ab;
}
#container #listing ul .entry .text .hi
{
    display: block;
    color: #53555a;
}

Answer 1

I think the grey border is what the OP wants.

    .entry {
    margin-top: 10px;
    border:1px solid grey;}

Try

.entry{    
display: block;
Float:left;
margin-top: 10px;
border:1px solid grey;}

Then clear:both; on the UL container.

Answer 2

Could you provide a link to the page that has this issue. We can't reproduce this issue with your code.

margin-bottom: 10px;

and other related CSS work fine for us.

Example: https://jsfiddle.net/kobub4kn/