What do the specs say? Have you researched this property on MDN and/or W3C (w3.org)?
Ah yes, the documentation! Thank you.
box-sizing
CSS property sets how the total width and height of an element is calculated. - MDN
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
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.
@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.
Great! So, is there nothing wrong with the design or the code?
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.
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
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…
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.
Great! Thank you so much!
When should I use border-box instead of content-box?