[CSS] <a>タグをボタンのように表示するには（インラインブロック要素の指定）

ブロックレベル要素とインライン要素

ブロックレベル要素とは文字通り、ブロックであることを意味しています。
つまり、高さや幅などを持っています。（高さや幅などを指定することができます。）
また、ブロックレベル要素の性質をもったタグは改行されます。

インライン要素とは、その文章の中の一部分という意味です。インライン要素の性質をもったタグは改行されません。

（ちなみに、HTML5ではブロックレベル要素、インライン要素という考え方はなくなっているそうです。）

<a>タグをボタンのように表示

HTML5でブロックレベル要素、インライン要素という考え方はなくなっていますが、それぞれのタグは、どちらかの性質を持っています。

<a>タグはインライン要素の性質を持っているため、高さや幅などを指定できません。
高さや幅などを指定するにはCSSでインラインブロック要素として指定します。

（display: inline-block; と指定します。）

以下の例では、paddingを指定しています。

index.html

<p>ボタン1とボタン2</p>
<a href="#">ボタン1</a>
<a href="#">ボタン2</a>
<p>ボタン3とボタン4</p>
<a href="#" class="btn">ボタン3</a>
<a href="#" class="btn">ボタン4</a>
<p>ボタン5とボタン6</p>
<a href="#" class="btn">ボタン5</a>
<a href="#" class="btn">ボタン6</a>

stylesheet.css

a {
  color: white;
  background-color: red;
  text-decoration: none;
}
.btn {
  padding: 10px 25px;
  color: white;
  background-color: red;
  display: inline-block;
}

この例は、以下のように表示されます。