min-width and max-width with the same value?

问题

In the past, I saw the next css and I was thinking if there is some actual difference between

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

and

width: 90px;

回答1:

using width will simply specify fixed width over the element without paying attention to its content (so you can have overflow) :

div {
  width: 80px;
  border:2px solid red;
}

<div>
  <img src="https://lorempixel.com/200/100/" />
</div>

Using max-width means that the element will have an upper bound for its width. So its width can be from 0 to max-width depending on its content.

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>

And min-width specify lower bound for width. So the width of the element will vary from min-width to ... (it will depend on other style).

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>

So if you specify min-width and max-width, you will set up a lower and upper bound and if both are equal it will be the same as simply specifing a 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>

来源：https://stackoverflow.com/questions/47133888/min-width-and-max-width-with-the-same-value

标签

css

width