The Box Model: Margins

The Box Model is one of those really cool tools web designers and developers use to move and arrange parts of a webpage to the exact spot they want! You can apply The Box Model to each <div> or piece of content you create on your webpage, to align it anywhere you want! Let’s take a look at the different parts of The Box Model!

This model contains four components:
Margins, Borders, Padding and Content.

Each <div> and/or element has these four components surrounding it, and you can use The Box Model to identify and modify each of them!

Here is the location of each component in relation to the content of your HTML element:

The Box Model

P.S Don’t forget to subscribe to Tech Talk Code to get a monthly roundup of our latest posts!

The Box Model: Margin

The first component of the Box Model is margin. Margin is the amount of space between the perimeter of your element and its parent container. In the image above, you’ll see that the margin is the outer boundary of your <div> or whichever element you are wanting to style.

To modify the margin of an element, you will do so in your CSS Stylesheet.

If you need a refresher, check out my post on Creating your CSS Stylesheet!

Margin Tutorial

To demonstrate how margin affects the placement of your element, I’ve created a <div> called “bigbox within the body of my HTML file. You’ll see in my CSS file I’ve given bigbox height and width of 200px and a dark grey color. I’ve also given the body of my HTML file a pink background-color to see the changes a little easier!

If you are confused about how I selected my box element, check out my CSS Selectors tutorial!

Le Example:

Big Box

I’ve also nested a paragraph within <div id=”bigbox”> element to help demonstrate which components of the <div id=”bigbox“> element are affected by margin.

Le Example:

Big Box With Text

Phew! Glad the setup is over!

Now let’s take a look at how we can move our <div id =”bigbox> down a little by adding a top margin in our CSS file!

Margin-Top

Margin-top is exactly what it sounds like! It modifies the top margin of your element. In the example below, I’ve added a margin-top of 100px. Check out how the top margin increased! You can use pixels(px), percentages(%) centimeters(cm) etc. to modify your margin-top!

Note: You can also use negative values to make your margin smaller than its default!

Le Example:

Margin Top

Notice in the CSS file I’ve added margin-top: 100px;

The dark grey box now has a top margin of 100px!

Now let’s take a look at how we can move <div id=”bigbox“> to the right by adding a left margin!

Margin-Left

Margin-left is also exactly what it sounds like – it is the margin to the left of your element! Increasing the margin-left of your element will move it to the right.

Le Example:

Margin Left

Because I added margin-left: 100px; the dark grey box element has moved to the right. Using margin-left is a great way to help center content on your webpage!

Modifying the margins of your element is a great way to customize the placement of your element on your webpage. We’ve looked at two so far – margin-top and margin-left.

Here are the four specific margin modifications you can use to style your element:

  • Margin-Top – increases top margin
  • Margin-Bottom – increases bottom margin
  • Margin-Left – increases left margin
  • Margin-Right – increases right margin

However, there is also a way to style top, right, bottom and left margins

at.the.same.time.
WUT?!

Introducing: margin – aka the efficient way to style margin-top, margin-right, margin-bottom and margin-left (in that order) in one line in your stylesheet!

Margin

Using margin when styling your element allows you to modify the top, right bottom and left with a single value.

Le Example:

Margin

With margin, each of the following have a value of 100px:

margin-top, margin-right, margin-bottom and margin-left

Or, if you want to add different margin values to each side of your element, you can modify in CSS like this:

MultipleMargins

The order that the values are applied go clockwise starting with margin-top followed by margin-right, margin-bottom and margin-left.

With margin: 200px 50px 200px 50px; #bigbox has a top margin of 200px, a right margin of 50px, a bottom margin of 200px and a left margin of 50px!

Pretty neat!

So there you have it! This is how to modify the margin of any element on your webpage.

Have you built your own website?! Leave a link to it below!

Don’t forget to subscribe to Tech Talk Code to get a monthly roundup of our latest posts!

Leave a Comment!