Intro to CSS: Part 5 – Margins and Padding

Daily To Do

Margins and Padding

Margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside something, whereas padding is the space inside something.

        The amount of space around elements can customized in the same way you can set up a page document in Word or Google Docs.  The four sides of an element can be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.
 
 

The Box Model

    Margins, padding and borders (coming up next) are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. Here is a visual for you:


Put It To Work

Let's try it out! We are going to add some padding margin and padding styling to our CSS document. Input the code below for h2:

See the Pen Intro to CSS: Part 5 – Margins and Padding by Tim Mumford (@mumfordt) on CodePen.

 
This leaves a 20-pixel width space around the secondary header and the same header itself is hefty from the 40-pixel width padding.
 
Up Next: Borders!