こんにちは！
今回はCSSのmin-widthとwidth、max-widthの違いについてまとめます。
ボタン例
<a href="#" class="btn">Lorem...</a>
.btn { display: inline-block padding: 20px 10px; /* width: 300px or min-width: 300px or max-width: 300px */ }
inline-block要素の場合
min-width: 300pxの場合
- inline-block要素なので、要素の幅に合わせた幅になろうとするが、300pxよりは小さくならない
width: 300pxの場合
- 300pxで固定される
max-width: 300pxの場合
- 300pxより小さい範囲では要素の幅に合わせた幅になるが、300pxより大きくはならない
block要素の場合
min-width: 300pxの場合
- block要素なので、横幅いっぱいに広がろうとするため全て最大幅になる
width: 300pxの場合
- 300pxで固定される
max-width: 300pxの場合
- 300pxより小さい範囲でも、横幅いっぱいに広がろうとするため、すべて300pxになる
使い分け
- width: ボタンのサイズが決まっているとき
- min-width: ある程度ボタンの大きさを統一した上で、改行をさせたくないとき
- max-width: 最大幅を指定したいとき
おわりに
今回はCSSのmin-widthとwidth、max-widthの違いについてまとめました。いろんな要素が組み合わさった時に、うまくサイズ指定が出来ないときがあるので、今回のまとめを参考にしながらCSSを書いていきたいと思います。
90/100
