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: Margin
The first component of the Box Model is margin.
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!
To demonstrate how margin affects the placement of your element, I’ve created a <div> called “
If you are confused about how I selected my box element, check out my CSS Selectors tutorial!
I’ve also nested a paragraph within <div id=”bigbox”> element to help demonstrate which components of the <div id=”
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 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!
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=”
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.
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-
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-Right – increases right margin
However, there is also a way to style top, right, bottom and left margins
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!
Using margin when styling your element allows you to modify the top, right bottom and left with a single value.
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:
The order that the values are applied go clockwise starting with margin-top followed by margin-right, margin-bottom
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!
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!