Example of CSS Margins

CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you can have full control over the margins of an element.

Individual Margins

You can specify the margin for each side of an element using the following properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

Example 1: Custom Margins for Each Side

<div style={{ marginTop: '20px', marginRight: '30px', marginBottom: '20px', marginLeft: '30px', backgroundColor: 'lightcoral' }}>
  This box has custom margins on all sides.
</div>

Example of Custom Margins on <p>

In this example, we're setting different margins for all four sides of a <p> element using inline styles.

<p style={{ marginTop: '100px', marginBottom: '100px', marginRight: '150px', marginLeft: '80px' }}>
  This paragraph has custom margins on all sides. Top: 100px, Bottom: 100px, Right: 150px, Left: 80px.
</p>