CSS Margin

Next ❯CSS Padding

Used to generate space just around the elements and outside its border

  • turned_in_notMargin Properties
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
    • margin
I am not fixed

I am Fixed

h1 {
  margin-top: 2px;
  margin-right: 2px;
  margin-bottom: 2px;
  margin-left: 2px;
}
marginsubject
marginclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  margin-top: 2px;
  margin-right: 2px;
  margin-bottom: 2px;
  margin-left: 2px;
}
</style>
</head>
<body>
<div style="border:dotted 4px purple; height: 120px;padding: 10px;">
 <h1 style="border:dotted 1px;text-align: center;background: #c9b3ef;font-size: 18px;">I am not fixed</h1>
 <p style="text-align: center;background-color:yellow;">I am Fixed</p>
</div>
</body>
</html>
  • label_outlineTryout Others
    PropertiesValues
    margin-top:
    margin-right:
    margin-bottom:
    margin-left:
    • Negative Values are also allowed
Checkout my position from center of the box

I am Fixed

h1 {
/*margin:top right bottom left */
  margin:1px 15px 12px 30px;
}
margin (All-In-One)subject
margin (All-In-One)close
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
/*margin:top right bottom left */
  margin:1px 15px 12px 30px;
}
</style>
</head>
<body>
  <div style="border:dotted 4px purple; height: 100px;padding: 10px;">
  <h1 style="border:dotted 1px;text-align: center;background: #c9b3ef;font-size: 18px;">
    Checkout my position from center of the box
  </h1>
  <p style="text-align: center;background-color:yellow;">I am Fixed</p>
</div>
</body>
</html>
  • label_outlineOther ways to write
    h1 {
/*margin:top right bottom left */
  margin:1px 15px 12px 30px;
}
    h1 {
/*margin:top right bottom*/
 margin:1px 15px 12px;
}
    h1 {
/*margin:top&bottom  right&left */
 margin:1px 15px;
}
    h1 {
/*margin:all sides*/
  margin:10px;
}

  • CSS Padding
❮ Prev CSS Outline
Next ❯CSS Padding
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯