CSS margin-left - Changing the left Margin of an HTML Element

Description

    margin-left: length;
    or
    margin-left: percentage;
    or
    margin-left: auto;
    or
    margin-left: inherit;

Examples for margin-left

Example 1:

Simple example using a div (block level element) to show large 50px left margin. We add a border to make it easy to see the margin. Note that the margin is the distance between the border and the outer edge of the element (see the box model). So the border is not affected by the margin.

    <style>
       #test {  margin-left: 50px; border:1px solid black; }
        #outer { border:1px solid black; }
    </style>
    
    <div id="outer">
        <div id="test">test text test text test text test text</div>
    </div>

Example 2:

Same example but this time with a span (an inline element). One thing to note, inline elements do not collapse to the width of the enclosing element, the default size is to closely wrap the containing text and elements.

    <style>
        #test2 {  margin-top: 50px; border:1px solid black; }
        #outer { border:1px solid black; }
    </style>
    
    <span id="outer">
        <span id="test2">test text test text test text test text</span>
    </span>

Example 3:

This time using a div with a negative -25px value for the left margin. This is a little weird - what happens is the div is shifted to left by 25 pixels which overlaps the left border of the outer div.

    <style>
        #test3 {  margin-left: -25px; border:1px solid black; }
        #outer { border:1px solid black; }
    </style>
    
    <div id="outer">
        <div id="test3">test text test text test text test text</div>
    </div>

Values for margin-left