【コーディング初心者向け】max-widthとwidthの違い

widthの横幅の設定の違い

今回は「width」の使い方に関しまして、ご説明致します。
「max」がつくのとつかない場合で、用途は大きく違います!!
「max-width」と「width」の違いに関しましてご説明致します。

max-widthについて

横幅に「max-width」を設定した場合。

サンプル


max-widthた場合

表示サンプル

このように全体がはみ出す事はありません。
maxで広がった時の大きさの設定を行なっているためです。

max-widthた場合

widthについて

横幅に「width」を設定した場合。

サンプル


max-widthた場合

表示サンプル

このように右側が切れていると思います。
これはこの横幅で設定と横幅の幅を決めてしまっているので
それいかに縮まる事はありません。

widthた場合

widthをHTMLで確認する

border-radiusのHTMLはこちら

widthとmax-widthの違い動画