Marginesy {

}

:: Marginesy : Wewnętrzne

Marginesy wewnętrzne.

Padding - czyli margines wewnętrzny - to odstęp, odsuwający zawartość elementu od jego wewnętrznych brzegów. Zastosowanie paddingów pozwoli np. zwiększyć czytelność akapitów.

Czerwony akapit bez wewnętrznych odstępów:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Czerwony akapit z wewnętrznymi odstępami 8px (padding:8px;)

Przykład kodu z deklaracją marginesów zewnętrznych.

p {
	padding-top:10px;
	padding-left:8pt;
	padding-right:2cm;
	padding-bottom:15px;
  }

Akapit z wewnętrznymi odstępami i żółtym obramowaniem symulującym odstępy.

Aby określić wszystkie marginesy wewnętrzne przy pomocy jednej reguły musimy pamiętać o kolejności deklaracji wartości. Kolejność ta jest określona regułą zegarka, zaczynamy od góry. Kolejne wartości to: góra, prawo, dół, lewo.

Łączenie atrybutów możemy zastosować określając jedną, dwie, trzy lub cztery wartości:

padding:20px; - wszystkie marginesy będą miały 20px
padding:20px 15px; - góra/dół = 20px, prawo/lewo = 15px
padding:20px 15px 40px; - góra = 20px, prawo/lewo = 15px, dół = 40px
padding:20px 15px 40px 11px; - góra = 20px, prawo = 15px, dół = 40px, lewo = 11px

Czerwony akapit z wewnętrznymi odstępami (padding:10px 5px 20px 15px;)

Pamiętaj o Box Modelu! Chcąc określić szerokość elementu np. na 300px jednocześnie dołączając do niego odstępy 10px z każdej strony, musisz pamiętać ,że wpłyną one na szerokość.

300px = 10 + 10 + 10 + 10 + width. => Width:260px

Zewnętrzne Problemy