CSS Property: padding
[this page | pdf | back links]
The CSS (CSS1) padding property is a shorthand
property combining the 4 padding sub-properties. The individual padding widths
can be set separately using padding-bottom,
padding-left,
padding-right
and padding-top.
As with some other aggregate edge properties, up to four parameter values can
be supplied (and if more than one is supplied then the properties are applied
to individual borders as described here).
Valid property values
(other than inherit
and initial) are
defined by the elements of the shorthand. Shorthand elements included in the margin
property are:
Value
|
Description
|
length
|
Any specified padding
size as a CSS length
|
%
|
Padding size specified
as percentage of width of container
|
Default Value:
|
0
|
JavaScript syntax:
|
e.g. object.style.padding="20px 30px"
|
Inherited:
|
No
|
Animatable:
|
See individual properties
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {border: 2px solid red; width: 100px; background-color: yellow}
span {border: 2px solid green; background-color: aqua;}
.x1 {padding: 5px;}
</style>
</head>
<body>
1. Element with default property<br>
<div><span>1</span></div><br><br>
2. Element set using in-file HTML style<br>
<div><span class="x1">2</span></div><br><br>
3. Element set using JavaScript<br>
<div><span id="x2">3</span></div>
<script>
document.getElementById("x2").style.backgroundColor = "aqua";
document.getElementById("x2").style.padding = "5px";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyPadding() {
var x = document.createElement("DIV"); x.style.padding = "5px"; return (window.getComputedStyle(x, null).padding == "5px");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties