How many developers even know what their site looks like when the client has styles and behaviors disabled?
How many courses are so bent on the outcome they forget to delve into the beginnings? HTML is a huge mouthful to take in one gulp, yet no courses are dedicated to just HTML. That’s why so few learners are unawares when it comes to default behavior. We’re so biased to what it looks like we miss how it is structured at the document level.
If we started at the very basic markup built from an outline purely to render the textual content and images we would see little structure is actually needed. If every layout effect requires more structure, our content gets buried in markup and nested levels to the nth degree that in the end only burden the client. Every HTML element has to be sourced in the namespace for specs to follow. More elements means more specing. Sure, it’s fast on today’s platforms but that is no reason to be inconsiderate toward the benefits of less structure.
Less structure in turn means less effects possible, to some degree. We would have to prove the extra structure was/is actually necessary. Building from the ground without adding structure is how we hit the roadblocks, in the first place. One should always travel down this path, first, before tossing in library solutions.
That brings us to discovering native behaviors that we may be wont to circumvent. Blanket solutions, such as reset.css take the universal approach one so avoids. We never get to see the native behavior if we never let ourselves encounter and study it.
To really learn HTML, one needs to spend a month with the W3C HTML Elements page open the whole time while they explore the default behavior of every element in the current recommendation. Do this and become an expert, overnight, thereafter.
So if I used a border-box model to style my page → assigned a width and height to my h1 element. Then added padding and borders to it - wouldn’t that affect the font size of the h1 element if there is any assigned?
Maybe I’m conceptualising this all wrong but from how I understand the border-box model basically auto-sizes the content to accommodate padding and borders within the specified width and height. What happens if a font size is also defined?
Thank you so for example, if an element has height 10px, font size 8px and padding of 1px on top and bottom - it’s perfect fit. But what if I increase the font size to 9px? Will the text appear outside the boundaries of the element?
Would I then have to add an overflow: scroll or something similar?
If the font size is increased, the height of the box should also increase so as to fit the text. Give us a while to set up a test example. Dashing out, just now, but will get to it, presently.
Update
It appears you are correct that the text will overflow the container. I was wrong that the box would stretch; it doesn’t. However, there is a workaround for this to guarantee that it does stretch… use EM as the unit of height. We can still use PX for the font size.
You are actually right, some of this websites for learning web development don’t really have the important topics/fundamentals a beginner is supposed to know. Thanks for sharing this update.
I tried to solve this exercise by copy-pasting the solution from the instructions:
* {
box-sizing: border-box;
}
And like apparently for some others, this didn’t get me the green check mark!
Incidentally, I have the “Render Whitespace” mode activated in the web IDE tools,
so it caught my eye that while the declaration line was properly indented, the two dots that should be indicating there are two spaces (see the red arrow pointing at one), were missing (red rectangle).
After I deleted the existing, but not marked-up spaces and typed them out on the keyboard, the two dots appeared:
And after clicking “Run” again, I magically did get the green check mark and was able to continue - no idea why, though…
It just makes me think of quotation marks that often get rendered wrong when copy-pasted into a text editor and lead to hard-to-find syntax errors.
I don’t quite understand the new box model. Does this mean that the content inside the box auto-aligns relative to the box sizes? And by not using the new box model means the content doesn’t auto-align?
OK. I think I get it now. It says it in the exercise instructions that the box size stays fixed, and by not using the box model then the box size can be manipulated by the border and padding, etc?
Probably just if you wanted minor tweaks in the visuals of the content sizing within the content-box dimensions. For instance, using the border-box method will auto-size the content within the box, but by using the content-box method the content does not auto-align proportionality to the size of the border/padding? Just guessing here
so for example, if an element has height 10px, font size 8px and padding of 1px on top and bottom - it’s perfect fit. But what if I increase the font size to 9px? Will the text appear outside the boundaries of the element?
