html - 边框与链接上方的文本重叠

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;