html - CSS 阻止错误定位

Question

编辑:我刚刚修复它，我有一个“行高:1.5em；”正文中的行{}。很抱歉接受您的意见，感谢所有试图帮助我的人。

我正在为我的网站上的新闻系统构建一个表单。我只使用 HTML/CSS，稍后会添加 php。 This is my final result.
问题是底部的文本框。他们是 3(发布者/昵称/日期)。他们的位置应该更高，你可以看到here .好像盒子里只有一半的文字。
这是我的代码:

<div class="news">
  <img src="img/Facebook.png" class="news-picture" alt="test" />
  <a href="#" class="news-title">Stanislav Ivanov on "How to escape from bronze"</a>
  <span class="postedby">Posted by &nbsp </span>
  <span class="nickname"><a href="#">Sunata</a> &nbsp </span>
  <span class="date">October 6, 2015</span>
</div>

.news-picture {
  width: 45px;
  height: 45px;
  margin: 0px 12px 0px 0px;
  border-radius: 3px;
  float: left;
}
.news-title:link,
:visited {
  color: #0084B4;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  float: left;
  display: block;
  margin-top: 0px;
}
.news {
  font-family: Lato, sans-serif;
  height: 45px;
  clear: both;
  margin-bottom: 10px;
}
.news span {
  display: block;
  max-height: 14px;
  float: left;
  vertical-align: top;
}
.news .postedby {
  font-size: 14px;
  color: grey;
}
.news .nickname {
  color: #0084B4;
  font-size: 14px;
}
.news .date {
  font-size: 14px;
  color: black;
}

Answer 1

问题是因为文本可能有一个默认的line-height。

尝试提供自定义 line-height 例如:line-height:14px。 (稍微调整一下这个数字，让它成为你想要的样子)