coding help
Quick Code


Copy to clipboard
<div style="margin-left:100px">TEXT</div>

Introduction

Margin is a HTML, CSS, and WikiText element that is mainly used to indent text (which also can be done by putting a colon [:] in front of the text). Margin is similar to Padding, but you can also use it to indent on the right, top, or bottom! Indenting is how far away from the edge of the coded area the text or item has to be.

Using Margin

Margin has four parts to it: top-margin, bottom-margin, left-margin, and right-margin. Let's take a look at top-margin first.

Top Margin

Top margin is how far away from the top edge of the coded area the text or item is. You can use top margin by typing in the following code: 

<div style="margin-top: __px;">TEXT</div>

Replace the blank with a number. When you're done, it should look like the following:

See how far this is from the line above it?

Bottom Margin

Bottom margin is how far away from the bottom edge of the coded area the text or item is. You can use bottom margin by typing in the following code: 

<div style="margin-bottom: __px;">TEXT</div>

Replace the underscore (__) with a number. When you're done, it should look like the following:

This should like look normal text, but it really isn't.

Left Margin

Left margin is how far away from the left edge of the coded area the text or item is. You can use left margin by typing in the following code: 

<div style="margin-left: __px;">TEXT</div>

Replace the underscore (__) with a number. When you're done, it should look like the following:

See how far this is from the left edge?

Right Margin

Right margin is how far away from the right edge of the coded area the text or is. It can only really be seen when using right Text Align. You can use right margin by typing in the following code: 

<div style="margin-right: __px;">TEXT</div>

Replace the underscore (__) with a number. When you're done, it should look like the following:

See how far this is from the right edge?

Combined Margin

You can get a combined margin by adding all or some of the different sub-attributes of margin together.

Example code: 

<div style="margin-left: 20px; margin-top: 20px;">TEXT</div>

This code gives us

TEXT

All Side Margin

You can also use a code that margins every side, in just a few letters!

Example code: 

<div style="margin: 20px;">TEXT</div>

This code gives us:

See how this shows a visible change in the left and top margin in one code? It also affects the bottom and right, although that is less visible.