CSS Padding
The CSS padding properties create space around an element's content, inside its border.
CSS lets you set the padding for each side of an element (top, right, bottom, left), and there is a shorthand property for setting them all at once.
Example
This element has 70px of padding on every side.
Prompt
An HTML page that shows an element with large padding inside its border.
In an internal
<style> block, give a <div> 70px of padding, a border, and a background color so the space inside the border is clear. Put some text inside the div.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 70px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This element has a padding of 70px.</div>
</body>
</html>
Padding - Individual Sides
CSS has a property for each side: padding-top, padding-right, padding-bottom, and padding-left.
All padding properties can take these values:
- a length — a padding in
px,pt,cm, and so on. - a percent — a padding as a percent of the containing element's width.
inherit— the padding is taken from the parent element.
Note: Negative values are not allowed.
Example
Each side of the div gets a different padding.
Prompt
An HTML page that sets a different padding on each side of an element.
In an internal
<style> block, give a <div> padding-top 50px, padding-right 30px, padding-bottom 50px, and padding-left 80px. Add a border and background so the padding shows. Put text inside.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This div has different padding on all four sides.</div>
</body>
</html>
Padding - Shorthand Property
To make the code shorter, you can set all the padding in one padding property, which stands for padding-top, padding-right, padding-bottom, and padding-left.
The number of values changes which sides they apply to:
- Four values (
25px 50px 75px 100px): top, right, bottom, left. - Three values (
25px 50px 75px): top, then right and left, then bottom. - Two values (
25px 50px): top and bottom, then right and left. - One value (
25px): all four sides.
Four values
Sets the top, right, bottom, and left padding in order.
Prompt
An HTML page that uses the padding shorthand with four values.
In an internal
<style> block, give a <div> padding: 25px 50px 75px 100px (top, right, bottom, left), plus a border and background so the padding shows. Put text inside.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px 50px 75px 100px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>Four values: 25px top, 50px right, 75px bottom, 100px left.</div>
</body>
</html>
Three values
Sets the top, then the right and left, then the bottom.
Prompt
An HTML page that uses the padding shorthand with three values.
In an internal
<style> block, give a <div> padding: 25px 50px 75px (top, right and left, bottom), plus a border and background so the padding shows. Put text inside.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px 50px 75px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>Three values: 25px top, 50px right and left, 75px bottom.</div>
</body>
</html>
Two values
Sets the top and bottom, then the right and left.
Prompt
An HTML page that uses the padding shorthand with two values.
In an internal
<style> block, give a <div> padding: 25px 50px (top and bottom, then right and left), plus a border and background so the padding shows. Put text inside.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px 50px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>Two values: 25px top and bottom, 50px right and left.</div>
</body>
</html>
One value
Sets the same padding on all four sides.
Prompt
An HTML page that uses the padding shorthand with one value.
In an internal
<style> block, give a <div> padding: 25px (all four sides), plus a border and background so the padding shows. Put text inside.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 25px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>One value: 25px on all four sides.</div>
</body>
</html>