CSS Padding

Lession - #177 CSS Padding

Padding is used to make space around a element's content, within any defined borders.

The padding is the space between the text and the border. The padding is colored pink using the foundation shading property to make it simpler to see.

CSS has properties for indicating the padding for each side of a component:

padding top

padding right

padding base

padding left

All the padding properties can have the following values:
length - indicates a padding in px, pt, cm, and so forth
% - indicates a padding in % of the width of the containing component
inherit - indicates that the padding should to be inherited from the parent component

Let's see an example


<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

</body>
</html>

Output:

Try it here>

Web Technologies - CSS

Lesson Description

Lession - #177 CSS Padding

Let's see an example

Output:

Lessons

Lesson Description

Lession - #177 CSS Padding

Let's see an example

Output:

Log In to Your Skola Account!

Sign Up and Start Learning!

Recover password!

Your Shopping Cart

Basic of Nature

Color Harriet Tubman

Digital Photography

Order Subtotal

$121.87