FAQ: Changing the Box Model - Review: Changing the Box Model

What do the specs say? Have you researched this property on MDN and/or W3C (w3.org)?

1 Like

Ah yes, the documentation! Thank you.

box-sizing CSS property sets how the total width and height of an element is calculated. - MDN

1 Like

How about you show us some examples when you’ve had sufficient time to play with this property in the sandbox? Keep it simple but push the envelope.


Addendum

Above I listed five values but MDN only shows two of them, so it will take more digging to find the others. If you write that property in the repl editor it gives a selection list for the value. That’s where I got it from.

Here is a similar example to a very helpful example I’ve seen at MDN: https://repl.it/@samyadel/box-sizing-example#style.css

image

I do have one question though. In this example, we used the wildcard selector (universal selector - *) to reset some of the user agent stylesheet declarations (margin, padding, box-sizing). I set the box-sizing property of all HTML elements to border-box. Next, I selected the <div> with a class of parent and gave it a width of 200px, a height of 150px and a border of 5px solid blue. Finally, I selected the <div> with a class of child and gave it a width of 100%, a height of 100px and a border of 5px solid red. Before giving the <div> with a class of child a width of 100%, I gave it a width of 200px. This resulted in the box overflowing. As I was typing this question, I realized one thing. The total width of the <div> with a class of parent is 200px. However, as it has a border that is 5px thick, and we set every element’s box-sizing property to border-box, this means that the total width of its content area is 190px. Is this why 100% worked but 200px didn’t? 100% resulted in 190px and 200px resulted in a 10px overflow?

Exactly. The browser has to work with the dimensions it is given. When they are fixed, there is no room for adjustment. When they are proportional everything can be made to fit its available space.

1 Like

@mtf, I just finished this challenge project about the box model. In this challenge, we simply modified the box model of a few elements. However, I wanted to challenge myself and create this website from scratch on my personal machine.

Live: https://samyadel.github.io/davies-burger/
Code: https://github.com/samyadel/davies-burger

Can you please review my code and the live website and tell me how I can improve it?

The only thing missing is functionality which you could work on over time as you advance through the course. I wouldn’t presume to know any better than you how to improve it since that is subjective. When you have built in the functionality (interaction) ping this topic again for an objective review. Others may be able to weigh in, too.

1 Like

Great! So, is there nothing wrong with the design or the code?

1 Like

It looks to be valid.Have you validated it at validator.w3.org? And the CSS, as well? Those are the only concerns at this stage of the build.

Thank you for this validator. The only warnings I am getting are:

You’ve got six H1 elements for a page with only one subject (topic). That is raising the warning. Keep the top level heading in the header, and change all the rest to <h2></h2>.

Oh ok! Thank you so much :grinning:

1 Like

Fixed it!

1 Like

Did you validate your CSS?

Is there an online validator for this?
I believe the w3c validator is only for HTML

Look closely for a CSS validator where it reads,

This validator checks…

1 Like

I found a CSS validator on w3c.org.

Now just keep it valid as you grow your pages. Validation is a fundamental to DOM scripting. No point writing script that is working on invalid markup. It’s a train wreck waiting to happen. It all stems from valid markup, clearly defined structure, and a meaningful outline, including such concerns as hierarchy earlier encountered.

1 Like

Great! Thank you so much!

1 Like

When should I use border-box instead of content-box?