Embedded Files
CSS Padding
CSS Padding
CSS padding establishes the innermost component of the box model, generating space around an element's content within any given margins and/or borders. Padding values are entered as lengths or percentages and cannot be negative.
Padding - Individual Sides
Padding - Individual Sides
CSS allows you to set padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
The following values can be assigned to all padding properties:
length - defines padding in px, pt, cm, and so on.
% - specifies padding as a percentage of the width of the enclosing element.
inherit - indicates that the padding should be passed down from the parent element.
Negative values are not permitted.
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<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>
CSS
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Shorthand Property
Padding - Shorthand Property
To simplify the code, all of the padding properties can be specified in a single property.
The padding property is a shortcut for the different padding properties listed below:
padding-top
padding-right
padding-bottom
padding-left
So here's how it goes:
If the padding property has the following four values:
padding: 25px, 50px, 75px, and 100px
The top padding is 25px.
The padding on the right is 50px.
The padding at the bottom is 75px.
The padding on the left is 100px.
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>The padding shorthand property - 4 values</h2>
<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>
</body>
</html>
CSS
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightblue;
}
If the padding property has three values:
padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<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>
CSS
div {
border: 1px solid black;
padding: 25px 50px 75px;
background-color: lightblue;
}
If the padding property has two values:
padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<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>
CSS
div {
border: 1px solid black;
padding: 25px 50px;
background-color: lightblue;
}
If the padding property has one value:
padding: 25px;
all four paddings are 25px
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<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>
CSS
div {
border: 1px solid black;
padding: 25px;
background-color: lightblue;
}
Padding and Element Width
Padding and Element Width
The CSS width property determines the width of the content area of an element. The content area is the region within an element's padding, border, and margin.
As a result, if an element has a set width, any padding added to that element will be added to the element's overall width. This is frequently an unfavorable outcome.
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<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>
<div class="ex3">This div is 400px, even thought it is defined as 200px in the CSS.</div>
<br>
<div class="ex4">The width of this div is 550px wide, even though it is defined as 300px in the CSS.</div>
</body>
</html>
CSS
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
div.ex3{
width: 200px;
padding: 25px 50px;
background-color: red
}
div.ex4{
width: 300px;
padding: 25px 50px 75px 100px;
background-color: lightgreen;
}
Page updated
Google Sites
Report abuse