HTML for Kids · Lesson

Padding

Introduction

Hello,

Welcome to CSS Padding lesson.

It is used to create a space within the boundaries of our HTML element.

Just like the margin, we can add 4-way padding to the element.

Percent Type

In our previous example, we assigned a padding value that takes a static value in px type. Just like the margin, we can set the percent type value.

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  background-color: lightblue;
  padding-top:10%;
  padding-right: 10%;
  padding-left: 10%;
  padding-bottom:10%;
  border: 1px solid black;
}
</style>
</head>
<body>

<div class="box">
    We assign percentage type 
     padding to this div element.
</div>

</body>
</html>

← Back to HTML for Kids