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;
}