ボタンを<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;
}