FAQ: The Box Model - Minimum and Maximum Height and Width

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Minimum and Maximum Height and Width” exercise from the lesson “The Box Model”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Minimum and Maximum Height and Width

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

I’m wondering what the element here includes.

e.g. if I say that p { min-width: 300px; } then it includes the paragraph text+its padding+its border+its margin? The whole package will be min. 300px wide?

many thanks,
Adam

1 Like
3

no, it will only be the paragraph that will be min 300px wide, if we say you have a paragraph 200 px wide but with a padding of 18px, a border of 2px in width and a margin of 30px, your paragraph will be resized to 300px and therefore the box of that paragraph won’t be 300px wide but 400px wide

4
  1. The height and width limits are referred to the content’s height and width, or the element’s box height and width (so content +padding + border + margin)? Just want to be sure as the following definitions were given on this exercise:

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.

  1. When a browser is resized by x percentage, every box-part of every element get resized proportionally?
5

What are the different types of elements here the Minimum and Maximum Height and Width can be used?

6

The components included in the size of an element’s box depends on the box-sizing property in your CSS file. The default box-sizing is content-box. In this case, only the content is included in the width or height specified. The other box-sizing option is border-box. In this case, the width and height specified in your CSS includes content + padding + border. The syntax is box-sizing: border-box , or box-sizing: content-box. The border-box typically makes it easier to size elements.

You can refer to the MDN article below for details:

I’m a newbie here, but I hope someone finds this helpful.

1 Like
7

I noticed that after the exercise is completed the page had multiple P elements layered on top of each other, I’m sure this is a mistake since this makes them practically unreadable despite completing the instructions. But when I zoomed in and enlarged the page it looked neat, but wouldn’t this mean that on smaller screens like mobiles and such it would become unreadable?

1 Like
8

Do we have to specify min and max values for every element of our document?

9

Hello everyone,
I can’t quite understand something. What is the difference with min-width, max-width, min-height, max-height and media queries please ?

Thank you for your help :slight_smile: