Minimum and maximum height and width # 08

Minimum and Maximum Height and Width

Because a web page can be viewed through displays of differing screen sizes, the content on the web page can suffer from those changes in size. To avoid this problem, CSS offers two properties that can limit how narrow or how wide an element's box can be sized.

• min-width — this property ensures a minimum width of an element's box.

• max-width — this property ensures a maximum width of an element's box.

p {
  min-width: 300px;
  max-width: 600px;
}

In the example above, the width of all paragraphs will not shrink below 300 pixels, nor will the width exceed 600 pixels.

Content, like text, can become difficult to read when a browser window is narrowed or expanded. These two properties ensure that content is legible by limiting the minimum and maximum widths of an element.

You can also limit the minimum and maximum height of an element.

• min-height — this property ensures a minimum height for an element's box.

• max-height — this property ensures a maximum height of an element's box.

p {
  min-height: 150px;
  max-height: 300px;
}

In the example above, the height of all paragraphs will not shrink below 150 pixels and the height will not exceed 300 pixels.

What will happen to the contents of an element's box if the max-height property is set too low? It's possible for the content to spill outside of the box, resulting in content that is not legible. You'll learn how to work around this issue in the next exercise.