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

Question

我正在做这样的事情：

看起来像：

正如你可以看到的那样，有些东西定位不好，我尝试使用填充边距来修复它，但是它没有移动verticaly，我该如何解决？

我的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

Answer 2

尝试给予：

.topic-name { float:left; margin:5px 0 0;}

Answer 3

试试这个

span.topic-name{
     display: block;
}

这应该有用。

Answer 4

保证金不适用于内联元素。如果您希望将余量应用于span，则需要进行元素块或内联块。

因此，

span.topic-name{
    display: block; 
        /* or */
    display: inline-block; 
}

将帮助您对元素应用边距，从而最终有助于垂直对齐它们。