Copyright © tutorialspoint.com

CSS - margin

previous next


Advertisements

Description:

The margin property is a shorthand property which sets the width of the margins on all four sides of an element.

Possible Values:

Applies to:

All the HTML elements

DOM Syntax:

object.style.margin="5px"

Example:

Here is the example:

<p style="margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>

<p style="margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
</p>

<p style="margin: 10px 2% -10px; border:1px solid black;"> top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p>

<p style="margin: 10px 2% -10px auto; border:1px solid black;"> top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser
</p>

This will produce following result:

all four margins will be 10px

top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.

top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px

top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser

To Become more comfortable - Do Online Practice


previous next

Copyright © tutorialspoint.com