Cryogenic Dreams

Today I am knackered. I've been doing a lot of hosting at work and I have a lot of other stuff going on (big news) and I have set myself one coding goal: watch a video with Codecademy about the Box Model in the Dev Tools.

WOW! I learned the most amazing thing in the Dev tools...

I can't BELIEVE that I didn't know this before...

So if you...:

Go to the dev tools
Select the HTML element
Use the + button in Styles to add a new style
Edit the HTML selector to be a universal selector *
Enter in this following block of code:

* {

border: 1px solid red !important;

}

This will add boxes around every single element on the website! Super helpful. I should also add if you are as neurodivergent as me (and as pedantic) it can be whatever you want - 10px double aquamarine etc. - but it might get harder to read. Also, you might not need the !important. But it is good to know it just in case...

Calculating Width

To calculate the width of an HTML element's box we add together: the content width, the padding (left + right), and the border (left + right).

Calculating Height

To calculate the height of an HTML box we calculate the sum of the content height, padding (top and bottom), and border (top and bottom).

Where Is The Margin?

Margin generates space only around the outside of an HTML element's box, and not on the inside of it.

box-sizing: content-box; vs box-sizing: border-box;

content-box

"In this mode, the browser calculates the size of the element's boxes by figuring out the width and height of the content first. If we need to add padding or border, however wide or high those properties are THEY THEN GET ADDED TO THE WITH AND HEIGHT OF THE CONTENT.

So this means that sometimes the box and appearance of an HTML element is wider or higher than we intend or expect it to be because the width and height here only mean the width and height of the stuff inside an HTML element which is just one part of the box and not the total sum of all the parts of the box."

border-box

"This changes the way the browser calculates the size of the box to account for any PADDING OR BORDER THICKNESS. Instead of applying width and height only to the content of an element with this new rule width and height of an element's box is calculated to include padding and border.

So if we make padding and border thicker then the browser will make the content grow or shrink to accommodate the padding and border."

Thus: "Our HTML element will now act more predictably".