html - CSS - 边距和填充不适用于垂直定位

Question

我正在做这样的事情:

它看起来像:

如您所见，有些东西的位置不好，我尝试使用填充边距来解决这个问题，但它没有垂直移动，我该如何解决？

我的 HTML:

    <div class='article-container'>
      <div class='article'>  
        <div class="img-position">
        <a href="#"><img src="http://funedit.com/andurit/try1/images/foto.png"/></a> 
        </div>
        <span class="topic-name"><a href="#">Název topicu nebo článku </a></span>
        <span class="date">28.8.2014 / 19:30</span>
        <span class="author"> od<a href="#"> Dwandy </a></span>
        <span class="article-description"> Ahoj jak se máte já se mám dobře ale nevím jak vy teda se máte? </span>
        <span class="article-comments"> <a href="#"> 4x reakce </a></span>
        <a href="#"><span class="read-article"></span></a> 
    </div>
  </div>

我的 CSS:

div.article-container {
    width:987px;
}

div.article {
    width:326px;
    height: 145px;
    display:inline-block;
}
div.img-position {
    display:inline-block;
    float:left;
    margin: 10px 0px 0px 5px;
}

span.author a{
    color:#555555;
    text-decoration: none;
}
span.topic-name{
    margin: 50px 0px 0px 0px;
}

span.topic-name a{
    color:#666666;
    text-decoration: underline;
    margin: 50px 0px 0px 0px;
}

span.article-description{
    margin: 10px 0px 0px 0px;
    width: 325px;
    display: block;
}

span.article-comments{
    margin: 25px 0px 0px 0px;
    float:left;
}

span.read-article{
    background-image: url("images/readit.png");
    background-repeat: no-repeat;
    display:block;
    width: 63px;
    height: 26px;
    float:right;
    margin: 18px 0px 50px 0px;
}

span.article-comments a{
    text-decoration: underline;
    color:#2d79bd;    
}

span.date {
    color:#a5a5a5;
} 

有没有人可以帮我把它改成图片上的样子？可以在以下位置找到实时预览:http://funedit.com/andurit/try1/

感谢阅读本主题。

Answer 1

position: relative; 或 absolute 并使用 top left