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

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.
margin-top
margin-right
margin-bottom
margin-left
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
CSS-Properties
CSS-Questions
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript