Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Tabele

Margines mieszany

Email Drukuj PDF

Tematy: model pojemnika | margines cząstkowy | margines mieszany | odstęp cząstkowy | odstęp mieszany

Dane w pigułce
Zastosowanie określa szerokość wszystkich marginesów elementu
Dziedziczenie nie
Wartości wartości marginesów cząstkowych
Wartość domyślna 0
Przykład margin: 2em 3em;
Uwagi
Odpowiednik w HTML brak

Aby zdefiniować mieszane atrybuty tła, należy wpisać w definicji stylu margin : wartości

Możemy podawać mieszane wartości marginesów dla danego elementu, posługując się wartościami marginesów cząstkowych.

<p style="margin: 1cm">Treść akapitu</p>

W tym akapicie jedna wartość określiła globalny margines o wielkości 1 cm.

<p style="margin: 1cm 2cm">Treść akapitu</p>

W tym akapicie definicja wprowadza 1-centymetrowy margines u góry i u dołu oraz 2-centymetrowy margines z lewej i z prawej strony elementu.

<p style="margin: 1cm 2cm 0.5cm 1.5cm">Treść akapitu</p>

Tutaj definicja wprowadza marginesy: 1cm u góry, 2cm z prawej, 0.5cm na dole i 1.5cm z lewej (kolejność góra-prawy-dół-lewy).

Metodą ustawiania bloku na środku wiersza w stosunku do marginesów jest użycie deklaracji margin: 0 auto;

<div style="width: 50%; margin: 0 auto; border: 1px dotted; ">
<p>To jest blok o szerokości 50% nadrzędnego pojemnika, który jest ustawiony na środku strony między lewym i prawym marginesem tego pojemnika.</p>
<img src="/grafika/sufi-small.jpg" alt="Sufi w tulipanach" width="171" height="177">
</div>

I wynik działania kodu:

To jest blok o szerokości 50% nadrzędnego pojemnika, który jest ustawiony na środku strony między lewym i prawym marginesem tego pojemnika.

Sufi w tulipanach

Styl ten można zastosować także do wielu innych elementów blokowych, jak choćby akapitu.

To jest akapit o szerokości 50% nadrzędnego pojemnika, który jest ustawiony na środku strony między lewym i prawym marginesem tego pojemnika.


Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15274233