こんにちは！
今回はCSSでボタンをinline-blockにする理由についてまとめます。
ボタン例
<a class="btn" href="#">ボタン</a>
.btn { width: 300px; padding: 20px 10px; /* display: inline or block or inline-block? */ }
inline要素の場合
width: 300pxの指定が効かないpadding: 20px 10pxが他の要素に被る
block要素の場合
- 親の段落の
text-alignが効かない
inline-block要素の場合
width:300px、padding: 20px 10pxも有効- 親の段落の
text-alignも有効
おわりに
今回はCSSでボタンをinline-blockにする理由についてまとめました。
結論としては、ボタンのサイズ指定ができて、なおかつ親要素と同じtext-alignに合わせられるという点から、ボタンにはinline-blockを使うと良いですね。
89/100
