Padding-ominaisuus

Ominaisuus padding asettaa elementin sisäisen täytön. Ominaisuuden arvona voivat olla minkä tahansa kokoyksiköt. Oletusarvoisesti jokainen selain voi lisätä elementteihin erilaisia täytöitä. Ominaisuus on lyhennys ominaisuuksille padding-top, padding-right, padding-bottom, padding-left.

Syntaksi

cssvalitsija {
  padding: arvo;
}

Parametrien määrä

Ominaisuus padding hyväksyy 1, 2, 3 tai 4 arvoa, lueteltuna välilyönnillä erotettuna:

Esimerkki

Tässä tapauksessa oletusarvoisesti sisäinen täyttö on nolla ja teksti on painettu lohkon reunaan asti:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 0;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Esimerkki

Tehdään nyt sisäinen täyttö 30px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Esimerkki

Nyt täyttö ylhäältä ja alhaalta on 20px, ja oikealta ja vasemmalta - 5px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 20px 5px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Esimerkki

Nyt täyttö ylhäältä 5px, oikealta - 15px, alhaalta - 25px, vasemmalta - 35px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 5px 15px 25px 35px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Katso myös