граница перекрывает текст выше ссылку

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

Это потому, что <a> элементы рядный, вам это нужно, чтобы быть block или inline-block уровня, так это «занимает место» и не перебирает элементы. Создание его inline-block будет работать лучше здесь, так как мы хотим, чтобы некоторые встроенные свойства:

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

Это было также отмечено в @Dmitriy комментарий.

Answer 2

Добавить padding-bottom: 10px; к пункту текста