Ostatnio edytowany:

padding

Autor: Virtual Patriot

Opis właściwości padding

Za pomocą właściwości padding możemy określić rozmiar kilku różnych wewnętrznych marginesów interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości padding

przeznaczenie
dziedziczenie
  • nie
wartość initial
  • 0
wyjątki initial
animowanie
  • tak

Interpretacja właściwości padding

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości padding

grupa wartości

Opis

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;
}

Składniki grupy wartości właściwości padding

Ważne

wartości właściwości padding możemy podawać według zasady formuły czterech wartości, dlatego tak naprawdę wymaganym składnikiem grupy wartości właściwości padding jest tylko jeden składnik

podana przez nas grupa wartości właściwości padding nie może zawierać wartości globalnych

Przykładowe zapisy

15px

15px 30px

15px 30px 45px

15px 30px 45px 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.

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.

Przykład

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"

Kod źródłowy przykładu

<!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:#AFF;
      }
    </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>