Question

HTML - 代码段

<div class="row">
    <div class="bot-text">
        <!-- <?php dynamic_sidebar('footer'); ?> -->
        <h1>Titley Title</h1>
        <p> paragraph of text ...</p>

        <a href="...">button text</a>
    </div>
</div>

CSS

.bot-text {
  position: relative;
  padding: 50px 80px;
  text-align: center;
}   

.bot-text p {
  font-family: 'Josefin Sans', serif;
  font-weight: 600; 
  font-size: 18px;
  line-height: 26px;
  color: #5d5d5d;
}

.bot-text a {
  position: relative;
  border: 1px solid #000;
  padding: 20px;
}

使用在下方创建的链接创建的标题和文本段落。我在带有填充的链接上有一个边框，边框覆盖了上面的文本。

我该如何避免这种情况？我希望边框向下推动链接，而不是与上面的文本重叠

Answer 1

将padding-bottom: 10px;添加到段落文字

Answer 2

这是因为<a>元素是内联的，您需要它是block或inline-block级别，因此它“占用空间”而不是过去的元素。由于我们需要一些内联属性，因此使inline-block在这里工作得最好：

.bot-text a {
  position: relative;
  display: inline-block;  // <-- Add This
  border: 1px solid #000;
  padding: 20px;
}

@Dmitriy 评论中也注明了这一点。

边框重叠链接上方的文字

2 个答案: