ボタンを<a>タグで実装しようと思ったときなど、
<a>タグはインライン要素なのでwidthやheightが指定できないなど不都合がある場合があると思います。
そんな時はdisplayプロパティでインラインブロック要素に変更することができます。
インラインブロック
ブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というものがあります。
インラインブロック要素はインライン要素と同様に横に並びますが、ブロック要素のように幅や高さをもちます。
ブロック要素(<div>タグなど) |
インラインブロック要素 | インライン要素(<a>タグなど) |
|
|---|---|---|---|
| width, height | 指定できる | 指定できる | 指定できない |
| margin, padding | 指定できる | 指定できる | 左右のみ指定できる |
| 配置 | 縦並び | 横並び | 横並び |
display
<a>タグは初期状態でインライン要素になっていますが、displayプロパティを使うと、インラインブロック要素に変更することができます。
displayプロパティはblock(ブロック要素), inline-block(インラインブロック要素), inline(インライン要素)を指定することができます。
style.css
a.btn {
display: inline-block;
}