CSS Lesson 11: Margin

1
14

Intoduction to CSS Margin

If we move from top to bottom on a Box model, the first part we have to deal with is the Margin. In a CSS Box Model, the margin is the transparent area outside the border. It is optional, so you decide whether you want to incorporate it into your design or not. Because a margin doesn’t have a background, it won’t affect your design if you don’t define its value.

A margin is on all sides of a Box Model i.e. top, right, bottom and left. Top and Bottom represents height while Left and Right define width. All these sides are actually the Margin Values.

The syntax of CSS Margin property is:

Margin Values

CSS Margin can be defined in a different format. Below is the detail of possible values along with a description:

Value Name Description
Length Define a margin in px, pt, cm, etc. Default value is 0px. Negative Values are allowed.
auto To define one value on all sides. Browser automatically calculates the margin.
percentage It relies upon the width of the containing element. Negative values are allowed.

Sides of Margin

There are four different sides of a margin: top, right, bottom and left. Below we show their usage in a demonstration:

Top margin

top-margin creates a gap from top between two elements. Here is an example

Source Code Output

This is normal text with no margin.

This text has a 20px margin from top.

Right Margin

right-margin creates a gap from right side. Here is an example of it.

Source Code Output

This text has a 200px margin from right.

Note:We used a background color to show you the total area.

Bottom Margin

bottom-margin creates a gap from bottom between two elements. Here is an example of it.

Source Code Output

This text has a 20px margin from bottom.

This is normal text with no margin.

Left Margin

left-margin creates a gap from the left side between two elements. Check out its demonstration

Source Code Output

This text has a 150px margin from left.

Margin Shorthand

You are well aware of the shorthand now. Right? Shorthand of a margin property is margin. Here’s the syntax!

However, as you know the margin has four different sides: top, right, bottom and left. You can use them in four different ways in Shorthand.
Before moving ahead, please note the format of the margin shorthand property is top, right, bottom and left.

Which one should you use? All above mentioned are acceptable, and you can use them on different occasions. However, the best approach is to use all four values (margin: 25px 100px 20px 75px). WHY? Especially for beginners, it will eliminate the possibility of error. If you don’t want to add a margin on a specific side just use “0” for it.

Summary

  • CSS Margin is the transparent gap above the borders.
  • Use margin-top for creating a gap between two elements from the top.
  • Use margin-right for creating a gap between two elements from the right.
  • Use margin-bottom for creating a gap between two elements from the bottom.
  • Use margin-left for creating a gap between two elements from the left.

Next Lesson

In the next lesson we will learn about the CSS Borders.

1 COMMENT

  1. […] use it depending upon your design requirements. The purpose and nature of padding is similar to Margin , so their properties and values are similar to each […]

Leave a Reply