Как добавить больше места между ссылками, чтобы отображалась вся кнопка?

Question

У меня проблема CSS, мои кнопки скрывают кнопку ниже.

Так должна выглядеть одна кнопка

В настоящее время у меня они заключены в абзац

<p><a href="#" class="link">1. Aaahh!!! Real Monsters</a></p>
<p><a href="#" class="link">2. ActRaiser</a></p>
<p><a href="#" class="link">3. Addams Family Values</a></p>

CSS для кнопок:

.link {
    background-color: red;
    box-shadow: 0 5px 0 darkred;
    color: white;
    padding: 0.5em 1.5em;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
  }

  .link:hover {
    background-color: #ce0606;
    cursor: pointer;
  }

  .link:active {
    box-shadow: none;
    top: 5px;
  }

Как можно Я показываю всю кнопку?

Answer 1

Установить стиль display: inline-block; для .link.

.link {
  background-color: red;
  box-shadow: 0 5px 0 darkred;
  color: white;
  padding: 0.5em 1.5em;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
}

.link:hover {
  background-color: #ce0606;
  cursor: pointer;
}

.link:active {
  box-shadow: none;
  top: 5px;
}

<p><a href="#" class="link">1. Aaahh!!! Real Monsters</a></p>
<p><a href="#" class="link">2. ActRaiser</a></p>
<p><a href="#" class="link">3. Addams Family Values</a></p>

Answer 2

Добавить margin-bottom к .link, он служит пробелом между границами элементов