Margins, Borders, and Padding

Blog Week 2

Posted by Ieronim E Oltean on December 27, 2015

Blog Week 2

December 27th, 2015

Yesterday was boxing day. If you're like me, you went to the mall and after trying to find parking for 10 minutes you said "Oh hell no, I am a grown man, I don't have time for this, I'm going home." Then went on Amazon and Kijiji to look for some deals.

But while you may have appreciated the marble outside of a building, or a beautiful glass ceiling, did you take the time to appreciate the fine margining, bordering, and padding while looking for Star Wars toys online?

In this crazy world of HTML, CSS, and web design, you have things called elements. Elements are links, or pictures, or paragraphs, or anything of visual significance on the page. Elements are wrapped up between and inside of margins, borders, and padding. Each one is slightly different.

Margin is how much space is outside of the element. Border is the outline or edge of an element. Padding affects the inside of the element. Lets see them in action!

This image currently has no borders, margins, or padding. Let's change that.

Margin-left 50px.

Margin-left 50px, plus dashed border.

Margin-left 50px, dashed border, and 50px padding.

Did you catch all the differences?

That's all for this week, folks! Next week's edition comes at you from the future, in a faraway year, 2016. Stay tuned!