Minimum and maximum width/height

Tot dusver hebben we gezien hoe we een element relatieve en absolute afmetingen kunnen geven door de width en height grootheden te gebruiken. Er is echter nog een andere mogelijkheid: Het aangeven van de minimale en/of maximale afmetingen. Hiervoor bestaan vier grootheden: min-height, max-height, min-width en max-width. Hun functies zijn makkelijk af te leiden uit hun namen, maar hoe en wanneer ze gebruikt moeten worden is misschien niet altijd even helder.

Door de minimale en/of maximale afmetingen voor een element aan te geven kan je gebruik maken van de vloeiende eigenschap van elementen op een webpagina, waarbij een element kan uitrekken en inkrimpen binnen bepaalde grenzen, zonder een constante en absolute grootte te hoeven aangeven, zoals bij de height en width grootheden. Net als bij width en height kan je met de min-* en max-* grootheden een absolute of relatieve lengte-eenheid of een percentuele grootheid specificeren.

Minimale breedte en hoogte

Door de min-width en min-height grootheden te gebruiken, kan je de kleinst mogelijke afmeting van een element vastleggen. Als voor het element geen breedte en/of hoogte vastgelegd is (auto), of als deze kleiner dan de minimale hoogte en breedte zijn, zullen de minimum hoogte en breedte-waarden deze overrulen. Een voorbeeld kan dit makkelijk aantonen:

<style type="text/css">
.box {
	width: 50px;
	height: 50px;
	background-color: DarkSeaGreen;
	padding: 10px;
	margin: 20px;
	float: left;
}
</style>

<div class="box">
	Box 1 - Default
</div>

<div class="box" style="min-height: 80px; min-width: 80px;">
	Box 2 - Minimum height and width
</div>

<div class="box" style="min-height: 80px; min-width: 80px;">
	Box 3 - Minimum height and width. Only expands to 80px.
</div>

<div class="box" style="min-height: 80px; min-width: 80px; height: auto;">
	Box 4 - Minimum height and width. Only expands to 80px, unless no max-height/height have been specified (auto)
</div>

Als u het voorbeeld test, merk dan op hoe het tweede vak standaard groter is, hoewel breedte en hoogte oorspronkelijk is ingesteld op 50 px - in dit geval hebben de waarden voor minimale breedte en minimale hoogte voorrang.

Now look at the third box. It has more content than the second, and while the minimum values would normally allow it to grow, the fact that it has now outgrown both its height and min-height values caps it at the biggest value of the two (80px). If we want to allow it to grow beyond this, the height and/or width should not be defined. We illustrated this with the fourth box, where we reset the height value to auto, which is the default value, if it wasn't set by the .box selector - with that in place, the element is now allowed to grow vertically to make room for the content.

Maximum width and height

Sometimes you want to restrain an element to a specific width and/or height. Obviously this can be done with the width and height properties, but this will force the element to stay at this size all of the time - no matter if the content requires it or not. By using the max-width and/or max-height properties instead, you can allow an element to be whatever size it requires to fit the content and then grow along with the content up until a certain point.

Here's an example where we use max-height and max-width:

<style type="text/css">
.box {
	background-color: DarkSeaGreen;
	padding: 10px;
	margin: 20px;
	float: left;
}
</style>

<div class="box">
	Box 1 - Default
</div>

<div class="box" style="max-height: 100px; max-width: 100px;">
	Box 2 - Maximum height and width
</div>

<div class="box" style="max-height: 100px; max-width: 100px;">
	Box 3 - Maximum height and width, this time with more content
</div>

Notice how each of the three boxes act differently, depending on whether or not max values are specified and how much space the content requires.

Summary

The max and min width/height properties gives you an extra layer of control in addition to the regular width and height properties. Please be aware that if both min-height, max-height and height are specified, min-height takes precedence over both, while max-height only takes precedence over height. The exact same is true for the width-related properties.