Ostatnio edytowany:

padding-top

Autor: Virtual Patriot

Opis właściwości padding-top

Za pomocą właściwości padding-top możemy określić rozmiar górnego wewnętrznego marginesu interesującego nas elementu HTML.

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

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

Interpretacja właściwości padding-top

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

rozmiar

Opis

Za pomocą właściwości padding-top oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar górnego wewnętrznego marginesu interesującego nas elementu HTML.

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru zawartości najbliższego elementu przodka tworzącego blok treści

Dla zaawansowanych

zasada dotycząca najbliższego elementu przodka tworzącego blok treści jest prawdziwa tylko wtedy, gdy element HTML, do którego chcemy dodać właściwość padding-top wraz z wartością wyrażona za pomocą procentów posiada pozycję static lub pozycję relative (dla pozostałych typów pozycji należy zapoznać się dokładniej z poszczególnymi wartościami właściwości position)

wartości procentowe tak naprawdę liczone są względem aktualnego rozmiaru szerokości logicznej

Przykład

rozmiar górnego wewnętrznego marginesu tego elementu "div" wynosi 100 pikseli, ponieważ do tego elementu "div" została dodana właściwość "padding-top" wraz z wartością "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-top:100px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar górnego wewnętrznego marginesu tego elementu "div" wynosi 100 pikseli, ponieważ do tego elementu "div" została dodana właściwość "padding-top" wraz z wartością "100px"
    </div>

  </body>
</html>