Za pomocą właściwości padding oraz z góry zdefiniowanej grupy wartości możemy określić rozmiar kilku różnych wewnętrznych marginesów interesującego nas elementu HTML.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
padding:15px 30px 45px 60px;
}
/* REGUŁA - 2 */
div {
padding-top:15px;
padding-right:30px;
padding-bottom:45px;
padding-left:60px;
}
- top
-
Składnik top jest wymaganym składnikiem grupy wartości właściwości padding. Składnik top określa wartość właściwości padding-top, czyli rozmiar górnego wewnętrznego marginesu interesującego nas elementu HTML.
- right
-
Składnik right jest wymaganym składnikiem grupy wartości właściwości padding. Składnik right określa wartość właściwości padding-right, czyli rozmiar prawego wewnętrznego marginesu interesującego nas elementu HTML.
- bottom
-
Składnik bottom jest wymaganym składnikiem grupy wartości właściwości padding. Składnik bottom określa wartość właściwości padding-bottom, czyli rozmiar dolnego wewnętrznego marginesu interesującego nas elementu HTML.
- left
-
Składnik left jest wymaganym składnikiem grupy wartości właściwości padding. Składnik left określa wartość właściwości padding-left, czyli rozmiar lewego wewnętrznego marginesu interesującego nas elementu HTML.
padding:50px 100px;
rozmiar górnego oraz dolnego wewnętrznego marginesu tego elementu "div" wynosi 50 pikseli, natomiast rozmiar prawego oraz lewego wewnętrznego marginesu tego elementu "div" wynosi 100 pikseli, ponieważ do tego elementu "div" została dodana właściwość "padding" wraz z następującą grupą wartości: "50px 100px"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
padding:50px 100px;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
rozmiar górnego oraz dolnego wewnętrznego marginesu tego elementu "div" wynosi 50 pikseli, natomiast rozmiar prawego oraz lewego wewnętrznego marginesu tego elementu "div" wynosi 100 pikseli, ponieważ do tego elementu "div" została dodana właściwość "padding" wraz z następującą grupą wartości: "50px 100px"
</div>
</body>
</html>
