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

  1. min-width — this property ensures a minimum width of an element’s box.
  2. 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.

  1. min-height — this property ensures a minimum height for an element’s box.
  2. 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 paragraph 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.

2.

Next, set the maximum width of the paragraph 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.

3.

In style.css, set the minimum height of the paragraph 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.

4.

In style.css, set the maximum height of the paragraph 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!

Folder Icon

Take this course for free

Already have an account?