CSS> Padding

Padding

To change the paddings on all four sides of an element, we use the padding property.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <p>How about you get more breathing room with Summerset apartments?
  </p>
 </body>

p {
 padding: 50px;
 border: 1px solid black;
 background-color: lavender;
}

To change the padding on the left side of an element, we use the padding-left property.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <p> The terms "left-wing" and "right-wing" were coined during the
   French Revolution of 1789. When drafting a new constitution:</p>
  <p class="leftWing">People who were more conservative assembled on
   the right side of the assembly hall, leading to the term
   "right-wing".</p>
 </body>

.leftWing {
 padding-left: 200px;
 background-color: crimson;
}

To change the padding on the right side of an element, we use the padding-right property.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <p>The terms "left-wing" and "right-wing" were coined during the
   French Revolution of 1789. When drafting a new constitution:</p>
  <p class="leftWing">People who were more liberal assembled on the
   left side of the assembly hall, leading to the term "left-wing".
  </p>
  <p class="rightWing">People who were more conservative assembled on
   the right side of the assembly hall, leading to the term
   "right-wing". </p>
 </body>

.leftWing {
 padding-right: 200px;
 background-color: crimson;
}

.rightWing {
 padding-left: 200px;
 background-color: lightBlue;
}

To change the padding at the top of an element, we use the padding-top property.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h3>Online Physics 101</h3>
  <p class="lightObjects">Objects lighter than water float to the top
  </p>
  <p class="heavyObjects">Objects heavier than water sink to the
   bottom</p>
 </body>

.lightObjects {
 padding-top: 20px;
}

.heavyObjects {
 padding-top: 60px;
 padding-bottom: 20px;
}

p {
 background-color: lightBlue;
}

To change the padding at the bottom of an element, we use the padding-bottom property.

 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h3>Online Physics 101</h3>
  <p class="lightObjects">Objects lighter than water float to the top
  </p>
  <p class="heavyObjects">Objects heavier than water sink to the
   bottom</p>
 </body>

.lightObjects {
 padding-top: 20px;
 padding-bottom: 60px;
}

.heavyObjects {
 padding-top: 60px;
 padding-bottom: 20px;
}

p {
 background-color: lightBlue;
}

TRY IT ON THE APP