CSS Padding

Next ❯Width & Height

Used to generate space just around the elements content and inside its border

  • turned_in_notPadding Properties
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
    • padding
Checkout my position in my box
h1 {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}
paddingsubject
paddingclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}
</style>
</head>
<body>
 <h1 style="border:solid 4px #6fda6f;font-size: 18px;">I am not fixed</h1>
</body>
</html>
  • label_outlineTryout Others
    PropertiesValues
    padding-top:
    padding-right:
    padding-bottom:
    padding-left:
Checkout my position in my box
h2 {
/*padding:top right bottom left */
  padding:1px 15px 12px 30px;
}
padding (All-In-One)subject
padding (All-In-One)close
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h2 {
/*padding:top right bottom left */
  padding:1px 15px 12px 30px;
}
</style>
</head>
<body>
<h2 style="border:solid 2px #a36fda;">Checkout my position in my box</h2>
</body>
</html>
  • label_outlineOther ways to write
    h1 {
/*padding:top right bottom left */
  padding:1px 15px 12px 30px;
}
    h1 {
/*padding:top right bottom*/
 padding:1px 15px 12px;
}
    h1 {
/*padding:top&bottom  right&left */
 padding:1px 15px;
}
    h1 {
/*padding:all sides*/
  padding:10px;
}

  • Width & Height
❮ Prev CSS Margin
Next ❯Width & Height
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯