CSS Margins

Home / CSS / CSS Margins

CSS Margins


CSS Margins:

The CSS margin properties are used to create space around elements, outside of any defined borders.

It defines the space between the element and its neighboring elements or the containing element. The margin property can be set individually for each side of an element (top, right, bottom, and left) or using a shorthand notation.

Example:



  <style>
    .box{
      width: 400px;
      height: 400px;
      border: 2px solid skyblue;
      margin: 20px;
    }
    div {
      width: 300px;
      height: 300px;
      border: 2px solid skyblue;
      margin: 50px;      
    }  
  </style>
<body>
  <div class="box">
    <div>
      <h1>Element</h1>
    </div>
  </div>
</body>

Output: