CSS Margin



CSS Padding propeerty is used to set some space between the border of an elements box.

we can set margins or the individual sides by using css margin properties.

If one value is defined , it is applied to all four sides.

css margin

Example

<!DOCTYPE html>
<html>
<head>
<title>CSS Margin for Individual Sides</title>
<style>
    h1 {
        margin-top: 50px;
        margin-bottom: 100px;
        background: red;
    }
    p {
        margin-left: 75px;
        margin-right: 75px;
        background: red;
    }
</style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a simple paragraph of text.</p>
    <p><strong>Note:</strong> Play with the margin property value to see how it works.</p>
</body>
</html>


Click on the "Run This Code" button to see how it works.

CSS Shorthand Margin Property

The CSS shorthand margin properties are

  • marin-top
  • marin-bottom
  • marin-right
  • marin-left

If one value is defined , it is applied to all four sides.

If two values are defined, the first value is applied to the bottom and top sides, and the second value is applied to the right and left side of the element's box.

If three values are defined, the first value is going to applied to the top, second value is going to applied to right and left side, and the last value is going to applied to the bottom.

Example

<!DOCTYPE html>
  <html>
  <head>
  <title>Margin for All Sides At Once</title>
  <style>
      h1 {
          margin: 50px; /* apply to all four sides */
      }
      p {
          margin: 25px 75px; /* vertical | horizontal */
      }
      div {
          margin: 25px 50px 75px; /* top | horizontal | bottom */
      }
      h2 {
          margin: 25px 50px 75px 100px; /* top | right | bottom | left */
      }
      h1, p, div {
          background: pink;
      }
  </style>
  </head>
  <body>
      <h1>This is a heading</h1>
      <p>This is a simple paragraph of text.</p>
      <div>This is a DIV element.</div>
      <h2>This is a heading</h2>
      
  </body>
  </html>
  


Click on the "Run This Code" button to see how it works.




CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units