Margin (out space)

Margin (out space)#

This option allows you to add some extra space between an object and the objects surrounding it.

Basic#

By using this property you can set distance from outside elemnts. Use following syntax:

  • margin-<top/left/right/bottom>: <value>;

  • margin: <value for all sides>;

  • margin: <top and bottom> <left and right>;

  • margin: <top> <left and right> <bottom>;

  • margin: <top> <right> <bottom> <left>.

%%HTML
<div style="border:solid green">
    <div style="border:solid 10px; margin-top: 10px">Upper element</div>
    <div style="border:solid 10px; margin: 50px 0px 100px 50px">Middle element</div>
    <div style="border:solid 10px">Lower element</div>
</div>
Upper element
Middle element
Lower element

Available values#

Value can be setted as:

  • px, cm, pt etc.

  • inherit - use option like parent;

  • auto.

Inherit#

%%HTML
<div style="border:solid green">
    <div style="border:solid 10px red; margin: 0px 30px 100px 50px">
        <div style="border:solid 10px; margin: inherit">margin: inherit</div>
    </div>
</div>
margin: inherit

Auto#

With this option, the element will take up all available vertical space and be centred horizontally.

%%HTML
<div style="border:solid green">
    <div style="border:solid 10px red; margin: auto;width: 500px; height: 200px">
        border:solid 10px red; margin: auto;width: 500px; height: 200px
    </div>
</div>
border:solid 10px red; margin: auto;width: 500px; height: 200px 
%%HTML
<div style="border:solid green">
    <div>Some other div</div>
    <div style="border:solid 10px red; margin: auto;width: 500px; height: 200px">
        border:solid 10px red; margin: auto;width: 500px; height: 200px
    </div>
</div>
Some other div
border:solid 10px red; margin: auto;width: 500px; height: 200px

Slamming the indentation#

If you are unig two elememtns close and:

  • Top element has bottom margin;

  • Bottom element has top margin;

The browser interprets this as an offset equal to the maximum of the original. In the following example, you can compare two blocks with two 200px margins and two blocks with only one 400px margin.

%%HTML
<div style="border:solid green">
    <div style="margin-bottom: 200px;border:solid red">Top div</div>
    <div style="margin-top: 200px; border:solid red"> Bottom div</div>
</div>
<div style="border:solid green">
    <div style="margin-bottom: 400px;border:solid red">Top div</div>
    <div style="border:solid red"> Bottom div</div>
</div>
Top div
Bottom div
Top div
Bottom div

Percentage#

You can set the margin relative to the parent size.

So in the following example, a parent div is created with a width of 500px. And two child elements, one using margin-left: 50%, the other margin-left: 250px - both elements have a similar margin from the left edge of the parent.

%%HTML
<div style="border:solid green; width: 500px; height: 100px">
    <div style="margin-left: 50%;border:solid red">margin-left: 50%</div>
    <div style="margin-left: 250px;border:solid red">margin-left: 250px</div>
</div>
margin-left: 50%
margin-left: 250px
Contents