The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.

The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.

We have the following properties to set an element margin.    

        The margin specifies a shorthand property for setting the margin properties in one declaration.

          The margin-bottom specifies the bottom margin of an element.

            The margin-top specifies the top margin of an element.

              The margin-left specifies the left margin of an element.

                The margin-right specifies the right margin of an element.

            The Margin Property

            The margin property allows you set all of the properties for the four margins in one declaration. Here is the syntax to set margin around a paragraph.

            The margin-bottom Property

            The margin-bottom property allows you set bottom margin of an element. It can have a value in length, % or auto.

            The margin-top Property

            The margin-top property allows you set top margin of an element. It can have a value in length, % or auto.

            The margin-left Property

            The margin-left property allows you set left margin of an element. It can have a value in length, % or auto.

            The margin-right Property

            The margin-right property allows you set right margin of an element. It can have a value in length, % or auto.


            Example:


            Output:

            CSS Margins Example

            all four margins will be 25px

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

            This is paragraph with a specified bottom margin in percent

            This is a paragraph with a specified top margin

            This is a paragraph with a specified left margin

            This is a paragraph with a specified right margin

            Do you Know?
            Progamming is what actually means ?

            What is software development ?

            How we categorized software development in different manner.

            C Programming
            C Plus Plus
            Python
            Java Development
            Web Designing
            Javascript
            Mysql
            Oracle
            We cover all the programming concepts in various programming languages, this tutorials are very help full for bigener as well as Experience developer, for the ease of understanding we categorized programming in different manner likewise.