CSS Padding:-
The padding creates space around a detail's content material, internal of any described borders.
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 2px solid red;
padding: 50px;
}
</style>
</head>
<body>
<h1> CSS Padding </h1>
<p> This paragraph has 50px padding.</p>
</body>
</html>
Try this code for a better experience
CSS Padding:-
The CSS padding residences generate an area around an element's content, within any defined borders.
With CSS, you have got complete manipulation over the padding. There are properties for setting the padding for every aspect of a detail (pinnacle, proper, bottom, and left).
Padding Individual Sides:-
CSS has houses for specifying the padding for each facet of a detail:
- padding - top
- padding - right
- padding - bottom
- padding - left
All the padding properties can be the following values:
- length - specifies padding in px, pt, cm, and so forth.
- % - specifies padding in % of the width of the containing element
- inherit - specifies that the padding has to be inherited from the parent element
NOTE:- Negative values are not allowed.
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 2px solid blue;
background-color: gray;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h1> Using Individual Padding Properties </h1>
<p> 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. </p>
</body>
</html>
Try this code for a better experience
Padding Shorthand Property:-
To shorten the code, it is possible to specify all the padding homes in a single asset.
The padding assets are a shorthand belonging to the subsequent individual padding homes:
- padding - top
- padding - right
- padding - bottom
- padding - left
So, here is how it works:
If the padding property has four values:
- padding: 25px 50px 75px 100px
- here top padding is 25px
- here right padding is 50px
- here bottom padding is 75px
- here left padding is 100px
<!DOCTYPE html>
<html>
<head>
<style>
p {bprder: 2px solid blue;
background-color: gray;
padding: 25px 50px 75px 100px;
}
</style>
</head>
<body>
<h1> Padding Shorthand Property For 4 Values</h1>
<p> This paragraph has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px. </p>
</body>
</html>
Try this code for a better experience
If the padding property has three values:
- padding: 25px 50px 75px
- here top padding is 25px
- here right and left paddings are 50px
- here bottom padding is 75px
<!DOCTYPE html>
<html>
<head>
<style>
p {bprder: 2px solid blue;
background-color: gray;
padding: 25px 50px 75px;
}
</style>
</head>
<body>
<h1> Padding Shorthand Property For 3 Values</h1>
<p> This paragraph has a top padding of 25px, a right padding of 50px, and the bottom padding of 75px. </p>
</body>
</html>
Try this code for a better experience
If the padding property has four values:
- padding: 25px 50px
- here top and bottom paddings are 25px
- here right and left paddings are 50px
<!DOCTYPE html>
<html>
<head>
<style>
p {bprder: 2px solid blue;
background-color: gray;
padding: 25px 50px;
}
</style>
</head>
<body>
<h1> Padding Shorthand Property For 4 Values</h1>
<p> This paragraph has a top padding of 25px, and the right padding of 50px. </p>
</body>
</html>
Try this code for a better experience
If the padding property has four values:
- padding: 25px
- here all the paddings are 25px
<!DOCTYPE html>
<html>
<head>
<style>
p {bprder: 2px solid blue;
background-color: gray;
padding: 25px;
}
</style>
</head>
<body>
<h1> Padding Shorthand Property For 4 Values</h1>
<p> This paragraph has all the padding of 25px. </p>
</body>
</html>
Try this code for a better experience
Padding And Element Width:-
The CSS width property specifies the width of the element's content region. The content region is the portion inside the padding, border, and margin of an element (the field model).
So, if an element has a certain width, the padding delivered to that element will be delivered to the total width of the detail. This is often an undesirable result.
<!DOCTYPE html>
<html>
<head>
<style>
div. one{width: 30px;
background-color: blue;
}
div. two{width: 300px;
padding: 25px;
background-color: gray;
}
</style>
</head>
<body>
<h1> Padding And Element Width </h1>
<div class="one"> This paragraph has 30px width. </div>
<br>
<div class="two"> The width of this div is 350px, although it is described as 300px in the CSS.</div>
</body>
</html>
Try this code for a better experience
To hold the width at 300px, no matter the quantity of padding, you could use the container-sizing property. This causes the element to keep its real width; in case you boom the padding, the available content material space will decrease.
<!DOCTYPE html>
<html>
<head>
<style>
div. one{width: 30px;
background-color: blue;
}
div. two{width: 300px;
padding: 25px;
background-color: gray;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1> Padding And Element Width-With Box Sizing</h1>
<div class="one"> This paragraph has 30px width. </div>
<br>
<div class="two"> The width of this div stays at 300px, notwithstanding the 50px of overall left and proper padding, due to the box-sizing: border-field property. </div>
</body>
</html>
Try this code for a better experience
0 Comments