☰

min-widthとmax-widthが同じ値ですか？質問する

tag-icon • tag-icon css width
min-widthとmax-widthが同じ値ですか？質問する

以前、次のCSSを見て、実際に何か違いがあるのだろうかと考えていました。

min-width: 90px;
max-width: 90px;

そして

width: 90px;

ベストアンサー1

を使用するとwidth、要素の内容に注意を払わずに固定幅を指定するだけです (そのため、オーバーフローが発生する可能性があります)。

div {
  width: 80px;
  border:2px solid red;
}
<div>
  <img src="https://lorempixel.com/200/100/" />
</div>

使用とはmax-width、要素が上界幅については、コンテンツに応じて 0 から max-width までの幅になります。

div {
  max-width: 300px;
  border: 2px solid red;
}

.diff {
  display: inline-block;
}
<div>
  <!-- this i a block element so max-width prevent it from taking 100% width -->
  <img src="https://lorempixel.com/200/100/" />
</div>
<div class="diff">
  <!-- this i an inline-block element so max-width has no effect in this case cause the content is taking less than 300px  -->
  <img src="https://lorempixel.com/200/100/" />
</div>
<div>
  <!-- You have overflow because the element cannot have more than 300 of width -->
  <img src="https://lorempixel.com/400/100/" />
</div>

そしてmin-width指定する下限幅については、要素の幅は min-width から ... まで変化します (他のスタイルによって異なります)。

div {
  min-width: 300px;
  border: 2px solid red;
}

.diff {
  display: inline-block;
  min-height:50px;
}
<div>
  <img src="https://lorempixel.com/200/100/" />
</div>
<div class="diff">
  
</div>
<div class="diff">
  <img src="https://lorempixel.com/200/100/" />
</div>
<div>
  <img src="https://lorempixel.com/400/100/" />
</div>

したがって、min-widthと を指定するとmax-width、下限と上限が設定され、両方が等しい場合は、 を単に指定した場合と同じになりますwidth。

div {
  min-width: 300px;
  max-width: 300px;
  border: 2px solid red;
}

.diff {
  display: inline-block;
  min-height:50px;
}
<div>
  <img src="https://lorempixel.com/200/100/" />
</div>
<div class="diff">
  
</div>
<div class="diff">
  <img src="https://lorempixel.com/200/100/" />
</div>
<div>
  <img src="https://lorempixel.com/400/100/" />
</div>

特殊なケース

特定のケースでは、Flexboxのように要素を縮小する機能を持つ場合widthと同じ結果が得られませんmin-width。max-width容器に収まるように縮む

.box {
  width:200px;
  border:1px solid red;
  display:flex;
  margin:5px;
}
.box > div {
  border:2px solid;
  height:50px;
}
<div class="box">
  <div style="width:300px"></div>
</div>

<div class="box">
  <div style="min-width:300px;max-width:300px;"></div>
</div>

width2 番目のケースでは、 とは異なり、min-widthがこれを防ぐため、要素は縮小しません。

resizeもう 1 つのケースは、プロパティの使用です。

div {
  border: 2px solid;
  height: 50px;
  overflow: auto;
  resize: both;
}
<div style="width:300px"></div>

<div style="min-width:300px;max-width:300px;"></div>

ご覧のとおり、/widthで定義された要素ではなく、で定義された要素のサイズを変更することができます。min-widthmax-width

また、min-width/はmax-widthよりも強力であることにも留意する必要がありますwidth。3つのプロパティを異なる値に設定すると、min-width勝者は

.box {
  border: 2px solid;
  height: 50px;
  width:100px;
  min-width:200px;
  max-width:150px;
}
<div class="box"></div>

これは、 /をwidth使用して設定された値を上書きできるが、その逆はできないことを意味します。min-widthmax-width

おすすめ記事