Paulina Mostowska

Ćwiczenie 9 - Marginesy

Wiele osób myli padding z marginem. Padding to odstęp wewnętrzny np. od lini obramowania. Margin to odstęp zewnętrzny np. linia obramowania zostaje bez zmian a odstęp od innych elementów zwiększa się zależnie od wybranej wartości. Tworzymy je podobnie poniżej możemy zobaczyć różnicę mmiędzy nimi:

Ten tekst ma margines 70px a obramowanie elementu zostało stworzone tak samo jak w punkcie z tabelami | margin:70px;
Ten tekst ma padding 70px a obramowanie elementu zostało stworzone tak samo jak w punkcie z tabelami | padding:70px;
Kiedy już rozumiemy różnicę między padding a margin resztę możemy wytłumaczyć na marginie, należy pamiętać, że te same funkcje możemy zastosować na paddingu.
W tym miejscu każdy margines ma inną wartość | margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px;

Możemy to także zrobić to w uproszczony sposób | margin: 25px 50px 75px 100px;

Marginesy mogą być także automatyczne | margin: auto;

Jeśli chcemy zarządzać tylko jednym marginesem możemy zrobić to tak jak wyżej za pomocą np. margin top, ale możemy to zrobić także uproszczoną metodą ustawiając marginesy, których nie dotyczy formatowanie na 0 | margin: 20px 0 0 0;

W metodzie uproszczonej edytowania marginesów pierwsza wartość to margines górny, druga margines prawy, trzeci dolny i czwarta lewy.