CSS properties - margin-related

revision: March 16, 2024

Content

margin property margin-block property margin-block-end property margin-block-start property margin-bottom property margin-inline property margin-inline-end property margin-inline-start property margin-left property margin-right property margin-top property

margin property

top

- sets the margins for an element, and is a shorthand property for the following properties: "margin-top", "margin-right", "margin-bottom", "margin-left".

If the margin property has four values:{margin: 10px 5px 15px 20px;} : top margin is 10px, right margin is 5px, bottom margin is 15px, left margin is 20px.
If the margin property has three values: {margin: 10px 5px 15px;} : top margin is 10px, right and left margins are 5px, bottom margin is 15px
If the margin property has two values:{margin: 10px 5px;} : top and bottom margins are 10px, right and left margins are 5px.
If the margin property has one value:{margin: 10px;} : all four margins are 10px.

Note: Negative values are allowed.

Margin Collapse : top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. This does not happen on horizontal (left and right) margins! Only vertical (top and bottom) margins!

CSS syntax : margin: length | auto | initial | inherit;

Property values:

length : specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed.

% : specifies a margin in percent of the width of the containing element.

auto : the browser calculates a margin

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.margin="1vw 2vw 2vw 3vw"

example: margin property

A paragraph with no specified margins.

This paragraph has a margin of 35 pixels on all four sides.

A paragraph with no specified margins.

A paragraph with a top and bottom margin of 3vw.

A paragraph with a top and bottom margin of 2vw.

The vertical margin between the two paragraphs above should be 5vw (3vw + 2vw). But due to margin collapse, the actual margin ends up being 3vw!

code:

                    <div>
                        <p>A paragraph with no specified margins.</p>
                        <p class="ex1">This paragraph has a margin of 35 pixels on all four sides.</p>
                        <p>A paragraph with no specified margins.</p>
            
                        <p class="a">A paragraph with a top and bottom margin of 3vw.</p>
                        <p class="b">A paragraph with a top and bottom margin of 2vw.</p>
                        <p>The vertical margin between the two paragraphs above should be 5vw (3vw + 2vw). 
                        But due to margin collapse, the actual margin ends up being 3vw!</p>
                    </div>
                    <style>
                        p.ex1 {margin: 3.5vw;}
                        p.a {margin: 3vw 0;}
                        p.b {margin: 2vw 0;}
                    </style>

margin-block property

top

- specifies the margin at the start and end in the block direction, and is a shorthand property for the following properties: "margin-block-start", "margin-block-end".

Values for the margin-block property can be set in different ways:

If the margin-block property has two values : {margin-block: 10px 50px;} : margin at start is 10px, margin at end is 50px.
If the margin-block property has one value : {margin-block: 10px;} : margin at start and end is 10px

The CSS margin-block and margin-inline properties are very similar to CSS properties "margin-top", "margin-bottom", "margin-left" and "margin-right", but the margin-block and margin-inline properties are dependent on block and inline directions.

The related CSS property writing-mode defines block direction. This affects where the start and end of a block is and the result of the margin-block property. For pages in English, block direction is downward and inline direction is left to right.

CSS syntax : margin-block: auto | value | initial | inherit;

Property values:

auto : default. The element's default margin-block value.

length : specifies margin-block in px, pt, cm, etc. Negative values are allowed.

% : specifies margin-block in percent relative to size of parent element in the inline direction.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.marginBlock="1vw 2vw"

example: margin-block property

A div element with no specified margins.

This div element has a margin of 3.5 vw on both sides in block direction.

A div element with no specified margins.

This DIV has a margin of 1vw from the start in the block direction, and 5vw from the end.

code:

                <div>
                    <div class="DIV-A">A div element with no specified margins.</div>
                    <div class="DIV-A">A div element with no specified margins.</div>
                    <div class="ex1">This div element has a margin of 3.5 vw on both sides in block direction.</div>
                    <div class="DIV-A">A div element with no specified margins.</div>
                    <div class="DIV-A" id="DIV-B">This DIV has a margin of 1vw from the start in the block direction, 
                    and 5vw from the end.</div>
                </div>
                <style>
                .DIV-A {background-color: lightblue;}
                    div.ex1 {border: solid black 0.1vw; margin-block: 3.5vw;}
                    #DIV-B{background-color: lightblue; border: solid black 0.2vw; margin-block: 1vw 5vw;}
                </style>

margin-block-end property

top

- specifies the margin at the end in the block direction.

The related CSS property writing-mode defines block direction. This affects where the start and end of a block is and the result of the margin-block-end property. For pages in English, block direction is downward and inline direction is left to right.

CSS syntax : margin-block-end: auto | value | initial | inherit;

Property values:

auto : default. The element's default margin.

length : specifies distance in px, pt, cm, etc. Negative values are allowed.

% : specifies distance in percent relative to size of parent element in the inline direction.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.marginBlockEnd="2vw"

example: margin-block-end property

A div element with no specified margins.

This div element has a margin of 3.5 vw at the end in block direction.

A div element with no specified margins.

This DIV has a margin of 5vw from the end in the block direction.

code:

                <div>
                    <div class="DIV-C">A div element with no specified margins.</div>
                    <div class="DIV-C">A div element with no specified margins.</div>
                    <div class="ex2">This div element has a margin of 3.5 vw at the end in block direction.</div>
                    <div class="DIV-C">A div element with no specified margins.</div>
                    <div class="DIV-C" id="DIV-C">This DIV has a margin of 5vw from the end in the block direction.</div>
                </div>
                <style>
                .DIV-C {background-color: lightblue;}
                    div.ex2 {border: solid black 0.1vw; margin-block-end: 3.5vw;}
                    #DIV-C{background-color: lightblue; border: solid black 0.2vw; margin-block-end: 5vw;}
                </style>

margin-block-start property

top

- specifies the margin at the start in the block direction.

The related CSS property writing-mode defines block direction. This affects where the start and end of a block is and the result of the margin-block-start property. For pages in English, block direction is downward and inline direction is left to right.

CSS syntax : margin-block-start: auto | value | initial | inherit;

Property values:

auto : default. The element's default margin distance.

length : specifies distance in px, pt, cm, etc. Negative values are allowed.

% : specifies distance in percent relative to size of parent element in the inline direction.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.marginBlockStart="2vw"

example: margin-block-start property

A div element with no specified margins.

This div element has a margin of 3.5 vw at the start in block direction.

A div element with no specified margins.

This DIV has a margin of 5vw from the start in the block direction.

code:

                <div>
                    <div class="DIV-D">A div element with no specified margins.</div>
                    <div class="DIV-D">A div element with no specified margins.</div>
                    <div class="ex3">This div element has a margin of 3.5 vw at the start in block direction.</div>
                    <div class="DIV-D">A div element with no specified margins.</div>
                    <div class="DIV-D" id="DIV-D">This DIV has a margin of 5vw from the start in the block direction.</div>
                </div>
                <style>
                .DIV-D {background-color: lightblue;}
                    div.ex3 {border: solid black 0.1vw; margin-block-start: 3.5vw;}
                    #DIV-D{background-color: lightblue; border: solid black 0.2vw; margin-block-start: 5vw;}
                </style>

margin-bottom property

top

- sets the bottom margin of an element. Negative values are allowed.

CSS syntax : margin-bottom: length | auto | initial | inherit;

Property values:

length : specifies a fixed bottom margin in px, cm, em, etc. Default value is 0. Negative values are allowed.

% : specifies a bottom margin in percent of the width of the containing element.

auto : the browser calculates a bottom margin

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.marginBottom="10vw"

example: margin-bottom property

A paragraph with no margins specified.

A paragraph with a 2.5vw bottom margin.

A paragraph with no margins specified.

code:

                <div>
                    <p>A paragraph with no margins specified.</p>
                    <p class="ex4">A paragraph with a 2.5vw bottom margin.</p>
                    <p>A paragraph with no margins specified.</p>
                </div>
                <style>
                p.ex4 {margin-bottom: 2.5vw;}
                </style>

margin-inline property

top

- specifies the margin at the start and end in the inline direction, and is a shorthand property for the following properties: "margin-inline-start", "margin-inline-end".

Values for the margin-inline property can be set in different ways:

If the margin-inline property has two values: {margin-inline: 10px 50px;} : margin at start is 10px, margin at end is 50px.
If the margin-inline property has one value: {margin-inline: 10px;} : margin at start and end is 10px

The CSS margin-inline and margin-block properties are very similar to CSS properties "margin-top", "margin-bottom", "margin-left" and "margin-right", but the margin-inline and margin-block properties are dependent on block and inline directions.

The related CSS property writing-mode defines inline direction. This affects where the start and end of an element is and the result of the margin-inline property. For pages in English, block direction is downward and inline direction is left to right.

CSS syntax : margin-inline: auto | value | initial | inherit;

Property values:

auto : default. The element's default margin-inline value.

length : specifies margin-inline in px, pt, cm, etc. Negative values are allowed.

% : specifies margin-inline in percent relative to size of parent element in the inline direction.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.marginInline="2vw 4vw"

example: margin-inline property

A div element with no specified margins.

This div element has a margin of 3.5 vw on both sides in the inline direction.

A div element with no specified margins.

code:

                <div>
                    <div class="DIV-E">A div element with no specified margins.</div>
                    <div class="DIV-E" id="ex1-E">This div element has a margin of 3.5 vw on both sides in the 
                    inline direction.</div> 
                    <div class="DIV-E">A div element with no specified margins.</div>
                </div>
                <style>
                    .DIV-E{background-color: rgb(239, 135, 88); width: 25%; height: 10vw;  float: left;}
                    #ex1-E {background-color: lightblue; border: solid black 0.2vw; margin-inline: 3.5vw;} 
                </style>

margin-inline-end property

top

- specifies the margin at the end in the inline direction.

CSS syntax : margin-inline-end: auto | value | initial | inherit;

Property values:

auto : default. The element's default margin-inline-end value.

length : specifies margin-inline-end in px, pt, cm, etc. Negative values are allowed.

% : specifies margin-inline-end in percent relative to size of parent element in the inline direction.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.marginInlineEnd="4vw"

example: margin-inline-end property

A div element with no specified margins.

This div element has a margin of 3.5 vw at the end in the inline direction.

A div element with no specified margins.

code:

                <div>
                    <div class="DIV-F">A div element with no specified margins.</div>
                    <div class="DIV-F" id="ex1-F">This div element has a margin of 3.5 vw at the end in the 
                    inline direction.</div> 
                    <div class="DIV-F">A div element with no specified margins.</div>
                </div>
                <style>
                    .DIV-F{background-color: rgb(239, 135, 88); width: 25%; height: 10vw;  float: left;}
                    #ex1-F {background-color: lightblue; border: solid black 0.2vw; margin-inline-end: 3.5vw;} 
                </style>

margin-inline-start property

top

- specifies the margin at the start in the inline direction.

The related CSS property writing-mode defines inline direction. This affects where the start and end of an element is and the result of the margin-inline-start property. For pages in English, block direction is downward and inline direction is left to right.

CSS syntax : margin-inline-start: auto | value | initial | inherit;

Property values:

auto : default. The element's default margin-inline-start value.

length : specifies margin-inline-start in px, pt, cm, etc. Negative values are allowed.

% : specifies margin-inline-start in percent relative to size of parent element in the inline direction.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.marginInlineStart="4vw"

example: margin-inline-start property

A div element with no specified margins.

This div element has a margin of 3.5 vw at the start in the inline direction.

A div element with no specified margins.

code:

                <div>
                    <div class="DIV-G">A div element with no specified margins.</div>
                    <div class="DIV-G" id="ex1-G">This div element has a margin of 3.5 vw at the start in the inline direction.</div> 
                    <div class="DIV-G">A div element with no specified margins.</div>
                </div>
                <style>
                    .DIV-G{background-color: rgb(239, 135, 88); width: 25%; height: 10vw;  float: left;}
                    #ex1-G {background-color: lightblue; border: solid black 0.2vw; margin-inline-start: 3.5vw;} 
                </style>

margin-left property

top

- sets the left margin of an element. Negative values are allowed.

CSS syntax : margin-left: length | auto | initial | inherit;

Property values:

length : specifies a fixed left margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed.

% : specifies a left margin in percent of the width of the containing element.

auto : the browser calculates a left margin

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.marginLeft="1vw"

example: margin-left property

A paragraph with no margins specified.

A paragraph with a 3vw left margin.

A paragraph with no margins specified.

code:

                <div>
                    <p>A paragraph with no margins specified.</p>
                    <p class="ex1_H">A paragraph with a 3vw left margin.</p>
                    <p>A paragraph with no margins specified.</p>
                </div>
                <style>
                p.ex1_H {margin-left: 3vw;}
                </style>

margin-right property

top

- sets the right margin of an element. Negative values are allowed.

CSS syntax : margin-right: length | auto | initial | inherit;

Property values:

length : specifies a fixed right margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed.

% : specifies a right margin in percent of the width of the containing element.

auto : the browser calculates a right margin

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.marginRight="1vw"

example: margin-right property

A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with no margins specified.

A paragraph with a 10vw right margin. A paragraph with a 10vw right margin. A paragraph with a 10vw right margin.

A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with no margins specified.

code:

                <div>
                    <p>A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with
                    no margins specified.</p>
                    <p class="ex1_I">A paragraph with a 10vw right margin. A paragraph with a 10vw right margin.
                    A paragraph with a 10vw right margin.</p>
                    <p>A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with 
                    no margins specified.</p>
                </div>
                <style>
                p.ex1_I {margin-right: 10vw;}
                </style>

margin-top property

top

- sets the top margin of an element. Negative values are allowed.

CSS syntax : margin-top: length | auto | initial | inherit;

Property values:

length : specifies a fixed top margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed.

% : specifies a top margin in percent of the width of the containing element.

auto : the browser calculates a top margin

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.marginTop="1vw"

example: margin-top property

A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with no margins specified.

A paragraph with a 10vw right margin. A paragraph with a 10vw right margin. A paragraph with a 10vw right margin.

A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with no margins specified.

code:

                <div>
                    <p>A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with 
                    no margins specified.</p>
                    <p class="ex1_J">A paragraph with a 10vw right margin. A paragraph with a 10vw right margin.
                    A paragraph with a 10vw right margin.</p>
                    <p>A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with
                    no margins specified.</p>
                </div>
                <style>
                p.ex1_J {margin-top: 5vw;}
                </style>