View video tutorial
CSS Padding
CSS
Define the space between the element content and element boundary.
CSS Padding
➔ Padding is used to define space around the content of an element.
➔ Padding is the space inside an element.
➔ Padding creates a buffer between its content (text, image) and its border.
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS padding Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
section {
background-color: blue;
padding: 10px;
display: inline-block;
}
div {
background-color: green;
padding: 40px;
display: inline-block;
}
img {
border: 1px solid #fff;
}
</style>
</head>
<body>
<h3>CSS padding Example</h3>
<p>Padding is the space inside an element.</p>
<p>Note: Here the blue element uses padding 10px and the green element uses padding 40px.</p>
<section>
<div>
<img src="resources/images/fruits-apple.png" width="60">
</div>
<div>
<img src="resources/images/veg-broccoli.png" width="60">
</div>
</section>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.