How to set the margins of a paragraph element using CSS ?

Last Updated : 05 Jun, 2023

The CSS margins properties are used to make space around components, outside any characterized borders. With CSS, you have full power over the margins. There are properties for setting the edge for each side of a component (top, right, base, and left).

CSS has properties for indicating the edge for each side of a component.

All the margin properties can have the following values.

auto: The browser calculates the margin
length: It specifies a margin in px, pt, and cm, etc.
%: It specifies a margin in % of the width of the containing element.
inherit: It specifies that the margin should be inherited from the parent element.

Example 1: In the following example, the HTML div is used for the styling of the paragraph. The border width will be 5px with solid blue color. The margin of the paragraph is according to top margin 50px, right margin 50px, bottom margin 100px, left margin 100px, background-color red.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 5px solid blue;
            margin: 50px 50px 100px 100px;
            background-color: red;
        }
    </style>
</head>
 
<body>
    <h2 style="color: green">GeeksforGeeks</h2>
    <b>Set margin of paragraph element</b>
    <div>
        When compared with C++, Java codes are generally
        more maintainable because Java does not allow many
        things which may lead bad/inefficient programming
        if used incorrectly. For example, non-primitives
        are always references in Java. So we cannot pass
        large objects (like we can do in C++) to functions,
        we always pass references in Java. One more example, since
        there are no pointers, bad memory access is also not possible.
    </div>
</body>
</html>

Output:

Example 2: In the following example, the width is 300px, the margin of the paragraph will be the same, and it will be in the center as it has margin: auto. The border width is 80px with purple color.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
            margin: auto;
            border: 80px solid purple;
        }
    </style>
</head>
 
<body>
    <h2 style="color: green">GeeksforGeeks</h2>
    <b>Use of margin:auto</b>
    <p>
        Python is a high-level, general-purpose and a
        very popular programming language. Python programming
        language (latest Python 3) is being used in web development,
        Machine Learning applications, along with all cutting
        edge technology in Software Industry. Python Programming
        Language is very well suited for Beginners, also for
        experienced programmers with other
        programming languages like C++ and Java.
    </p>
    <div>
        This div will be horizontally centered
        because it has <i>margin:auto;</i>
    </div>
</body>
</html>