I've Just Returned From The Salt, Salt Sea

I'm going back to CSS for a bit. I've made the decision. My head is so full of JavaScript atm. I need to take a break from it for a bit - and also thanks to one of the amazing EM's at work I have a new approach.

I'm not going to be trying to memorise everything from CSS anymore.

Because, the main thing with every feature and function of CSS is to know that it exists, right? I can always look it up. 

Thank you. 💚👽💚👽

Wrapping Up The Box Model

I finally went back to my CSS Box Model and I finished wrapping up the task where you just play around with the example for a little bit. I finally did this after I put this up for months.

What I enjoyed: switching up the colours. What I wasn't as fussed about: changing things like margins and padding sizes. What can I say, though?

I just really like bright colours. 😍😍😍😍

Changing the Box Model

The main elements in the box model are:

• The box dimensions
• The borders
• The padding
• The margin

Or another way to put it is, quoting directly,  "All HTML elements are boxes made up of four components: a content container, padding, border and margin". 

However, as we will see below, over time, the box model can make all of a web page's content difficult to position and manage.

Why Change The Box Model?

The box model can make it difficult to accurately size boxes. This is because the border thickness and padding (and anything else that is added on at all) are added to the overall dimensions of the box.

Box Model: Content-Box

This is just the default value for the property content-box. 

Just like normal is the default value for font-weight, or medium none color (where color is the color of the element) for border, so content-box is the default value for box-sizing. 

Box Model: Border-Box

Entering in the below code resets the box model and specified a new one: border-box.

* {
box-sizing: border-box;
}

This resets the box model to border-box for all of the HTML elements within the codebase. This new box model "avoids some of the dimensional issues" that the original box model causes.

An interesting thing in the example of the code that I have looked at is that the border thickness and padding go entirely inside of the box, thereby not extending the full size of the box at all.

Therefore, then, in the example given above, and in the border-box take on the box model, the width of the property is the same as the actual rendered width of the element. The content area is automatically sized based on the remaining width, after border and padding has been subtracted.

And so that's all that it really is, really

It's just taking an existing body of CSS code (or implementing it with a new one) and adding in the following code:

* {

    box-sizing: border-box;

}

And this just means that your borders and your padding are included in the total size of your element and therefore your element stays a predictable size no matter what. Wow.

Wow, wow, wow, wow, wow.

The difference between content-box and border-box is...

Literally just that if you use the default setting (or content-box) then whatever width you specify for your element, the border and padding values will be added on top of that and the size of the element will increase. Whereas:

If you use the above code to make the whole body border-box then borders and padding are included in the size of the total element and the rest of the element (i.e. the inner part) is adjusted by default.

Getting Something Wrong On The Quiz

I couldn't remember which of the two it was. So I got it the wrong way round. But nevermind. Here we are again:

• Horizontal margins add, vertical margins collapse.
• Horizontal margins add, vertical margins collapse.
• Horizontal margins add, vertical margins collapse.
• Horizontal margins add, vertical margins collapse.

The House Carpenter

Let's be clear, I was born to sing folk music. I was born to code too. And to be in the forest. But I was also born to sing and most especially to sing folk music. In fact, every day that I am not singing folk music I am wasting my life. Because: I have a folk voice. And a folk mindset. And for the past 16 years that I have been playing guitar I have been mostly playing folk guitar. So why am I not playing and singing it more often?

Anyway today's blog post is named after a wonderful and lovely traditional folk song, called The House Carpenter. It is very very similar to one of my other favourite folk songs of all time - John Reilly. 

The themes are similar but in THC she leaves her husband - in JR she has remained always faithful and true to him.

I discovered THC on Myrkur's most amazing album, "Folkesange" - beautiful. I highly recommend you check it our if you are able to. 

A very unlikely project for a metal band... And yet maybe not so unlikely after all. After all, it's all so closely connected - isn't it?

Album artwork for Myrkur, Folkesange