Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 25 May, 2021

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>

Output:

             

margin auto




My Personal Notes arrow_drop_up
Recommended Articles
Page :