CSS Box Model: max/min - width/height

 THE BOX MODEL

Minimum and Maximum Height and Width

Because a web page can be viewed through displays of differing screen size, 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 to:

• 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.

Instructions:

1.In style.css, set the minimum width of the p element to 200 pixels.

After you’ve done this successfully, resize the browser and notice how the paragraph’s box will no longer shrink below 200 pixels.

Hint:

Remember that paragraph elements are represented by <p> HTML tags, and they can be selected in CSS files with the p tag selector.

The minimum width of an element is set by using the min-width property.

2.Next, set the maximum width of the p element to 800 pixels.

After you’ve done this successfully, resize the browser and notice how the paragraph’s box will no longer expand beyond 800 pixels.

Hint:

The maximum width of an element is set using the max-width property.

3.In style.css, set the minimum height of the p element to 200 pixels.

After you’ve done this successfully, resize the browser and notice how the height of paragraph’s box will no longer shrink below 200 pixels.

Hint:

The minimum height of an element is set using the min-height property.

4.In style.css, set the maximum height of the p element to 300 pixels.

After you’ve done this successfully, resize the browser and notice how the height of paragraph’s box will no longer expand beyond 300 pixels. You should see your text overflowing. In the next exercise, we will fix that!

Hint:

The maximum height of an element is set using the max-height property.

Question and Answers