CSS Padding
Padding is like adding space around what's inside a box, within the lines that outline the box.
This element has a padding of 70px.
The CSS padding properties create room around the content of an element, within its set borders.
Padding - Individual Sides
CSS provides ways to define how much space should be added around each side of an element.
padding-toppadding-rightpadding-bottompadding-left
You can use different values for padding properties:
- length - specifies a padding in px, pt, cm, etc.
- % - specifies a padding in % of the width of the containing element
- inherit - specifies that the padding should be inherited from the parent element
Padding - Shorthand Property
You can make the code shorter by using just one property to set all the padding properties.
The padding property is a short way to set padding for different sides all at once:
padding-toppadding-rightpadding-bottompadding-left
How it works:
When you use the padding property with four values:
- padding: 25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px
If you use the padding property with three values:
- padding: 25px 50px 75px;
- top padding is 25px
- right and left paddings are 50px
- bottom padding is 75px
If you use the padding property with three values:
- padding: 25px 50px;
- top and bottom paddings are 25px
- right and left paddings are 50px
If the padding property has only one value:
- padding: 25px;
- all four paddings are 25px
Padding and Element Width
The CSS width property tells us how wide the stuff inside an element is. This stuff includes everything inside the element except for the padding, border, and margin.
If you set a width for something, like a box, and then add some extra space inside it (we call it padding), that extra space will actually make the whole thing wider. This can sometimes be a problem.
To ensure that the width stays fixed at 300 pixels, regardless of how much padding is added, you can utilize the
box-sizing property. This property ensures that the element retains its original width. So, if you add more padding, the space available for content inside the element will shrink accordingly.
<!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 box has space at the top, right, bottom, and left. The top has 50 pixels, the right has 30 pixels, the bottom has 50 pixels, and the left has 80 pixels.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 4 values</h2>
<div>This box on the web page has some space added around it. At the top, there's 25 pixels of extra space, on the right side there's 50 pixels, at the bottom there's 75 pixels, and on the left side, there's 100 pixels of extra space.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 3 values</h2>
<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 2 values</h2>
<div>This div element has a top and bottom padding of 25px, and a right and left padding of 50px.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right padding of 25px.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width - with box-sizing</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property. </div>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL