Question

我正在创建一个博客网站，并在帖子标题div中有一个元素：

<html>
  <head>
    <title>A Simple Blog</title>
    <link type="text/css" rel="stylesheet" href="/stylesheets/blogstyle.css">
  </head>

  <body>
    <h1 class="heading">BLOG</h1>


<div class="post">
  <div class="post-heading">
    <a class="post-title" href="/blog/5066549580791808">The Dark &amp; Light of Francisco Goya</a>
    <div class="post-date">March 1, 2015</div>
  </div>
  <div class="post-content">In the summer of 1969, as the violence intensified in Northern Ireland, the poet Seamus Heaney was in Madrid. Like any tourist, he went to the Prado, but not specifically, he later said, “to study examples of art in a time of violence.” He found, nonetheless, that some of Francisco Goya’s work on display “had the force of terrible events…. All that dread got mixed in with the slightly panicked, slightly exhilarated mood of the summer as things came to a head in Derry and Belfast.” He found Goya’s work “overwhelming,” and was fascinated at the idea of an artist confronting political violence “head-on.” In his poem “Summer 1969,” he wrote of his time in the heat of the Spanish city while Belfast burned:</div>
</div>


  </body>

</html>

样式表代码：

body {
    position: relative;
    padding: 10px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif, Times;
    background-color: #FFFFE6;
    width: 1000px;
}

.post-heading {
    height: 45px;
    border-bottom: 2px solid black;
    position: relative;
}
.post-title {
    font-family: "URW Palladio L","URW Gothic","Times New Roman",Times,serif;
    font-size: 30px;
    color : #444;
    text-decoration: none;
}

.post-date {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: absolute;
    right: 0px;
    bottom: 0px;
    color: #999;
}

.post-content {
    margin-top: 5px;
    font-family: Georgia,Times New Roman, sans-serif;
}

以下是我屏幕上网站的预览：

enter image description here

突出显示的<a class="post-title">和父<div class="post-heading"></div>元素之间存在差距。您将需要在蓝色框和底部的黑色边框之间稍微聚焦，以查看图片中的间隙。

这个差距让我抓狂！

为什么会出现这种差距，如何摆脱它？

Answer 1

从.post-heading元素中删除固定高度：

.post-heading {
    /* height: 45px; */
    border-bottom: 2px solid black;
    position: relative;
}

Example Here

<a> element in div slightly elevated from the bottom</a>

1 个答案: