Glossary
CSS
Padding in CSS
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;
}
Learn to Code in Python for Free
Start learning now
To advance beyond this tutorial and learn Python by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.
Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.