CSS Margin

CSS margin is a property that sets the space between an element's border and the adjacent elements. It's used to create space around an element, separating it from other elements on the page.

Here is an example of how to use the margin property:

div {
    margin: 20px;
  }

In this example, all sides of the div element will have 20 pixels of margin.

div {
    margin: 10px 20px;
  }

In this example, the top and bottom of the div element will have 10 pixels of margin, and the left and right will have 20 pixels of margin.

div {
    margin: 5px 10px 15px 20px;
  }

In this example, the top of the div element will have 5 pixels of margin, the right will have 10 pixels of margin, the bottom will have 15 pixels of margin, and the left will have 20 pixels of margin.

The margin property is commonly used to add space between elements on a page, and can be used to improve readability and create a more visually appealing layout.

Here's an example of how to use margin to center an element horizontally:

<div class="container">
    <p>Hello, world!</p>
  </div>

.container  {
    width: 80%;
    margin: 0 auto;
  }

In this example, the container element has a width of 80% of its parent element, and a margin of 0 on the top and bottom, and auto on the left and right. This centers the container horizontally within its parent element, and the paragraph element inside the container is also centered horizontally.

Next Article ❯