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:

box-model

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:

before margin

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.

after margin

.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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s