【CSS入門】max-widthとwidthの違い pxと%はどっち?

所有時間1分

今回はCSSの「max-width(max-height)」と「width(height)」の違いについて紹介する

目次

そもそもwidthとheightの違いは?

widthプロパティは親要素の横幅を指定し、heightプロパティは縦幅を指定できます。

widthとheightの値の指定方法

  • px()
  • %
  • auto

width(height)の値を指定するには上記の3つの方法があります。

pxでは要素の絶対値、%では親要素に対する相対値、autoで指定すると親要素の幅いっぱいに広がります。

max-widthで横幅の最大値を指定

max-width(max-height)で指定した横幅(縦幅)以上に要素は広がらないように指定できます。

min-widthは横幅の最小値を指定

max-width同様にmin-widthでは横幅の最小値を指定できます。

widthには%(auto)、max-widthにはpx

widthとmax-width(min-width)は同じ要素に対して同時に使用できます。この際、widthはレスポンス対応できる%(auto)指定、max-widthには絶対値となるpx指定がおすすめです。

以上です。

URLをコピーする
URLをコピーしました!
目次
閉じる