Padding property is aight

Nah j/k it’s pretty sweet, I’m just pooped. It’s been a long couple days of being busy at work then coming home and doing a lot of studying and prepping a release for a mixtape I worked on. Anywho, today I learned about the padding property, and completed my training of the box model, which I’m pretty proud of.

Let’s review that now. My way to remember the order of the properties here is My Big Pussy Comes, reflected in the diagram below:

So, padding is the little section here that lives right between the border and the content of the element itself. Something I forgot when messing around with this, is that padding affects the total size of the element. It actually pushed my two divs here together when I first adding the padding in for them:

I didn’t want this, so for the first div element I popped in the margin-top and margin-bottom property, which cleaned things right up.

.list
{
color:black;
background-color:rgba(0,118,188,0.5);
margin-top: 10px;
margin-bottom: 10px;
margin-left:50%;
padding: 5px 15px;
}

Ok good talk, time to drink whiskey and play chrono trigger.