A Short Spiel on Margins

Project 2

Step 1 (Just one Step Today): Let’s start out by talking about margins. With margins you have four options top, right, bottom, left. There are a couple different ways you can implement margins.

Option 1(a.k.a line 18):

One way to do margins is margin: top right bottom left; For example if you did margin: 8px 2px 5px 4px; Eight would change the top, two the right side, five the bottom, and four the left side. Now what is that 0 about? Zero doesn’t need units (px, %, em, etc.) since it means exactly zero. The example on line 18 uses a shorthand requiring only two values, the first being used for both top and bottom, the second being used for both left and right.

Option 2 (a.ka. line 27):

You can also implement margins by using margin-top: (the same applies for right, left, bottom). After you input the margin direction you desire just specify the px (or other unit). For example line 27, margin-left: -5px;

Margins are what create the gap between boxes btw.

Like what you read? Give Rose Pacheco-Campbell a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.