Margines
Margines
Margines to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 1 z 1. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 1 lekcji w sumie.
Wprowadzenie
Margines jest jednym z najważniejszych zagadnień w CSS.
Marginesy to odstępy, które tworzymy wokół krawędzi elementu.
Wyjaśnienie stron marginesu
Niezależnie od typu elementu, podczas tworzenia marginesu nie powinniśmy myśleć o nim jako o układzie czterokierunkowym (góra, prawo, dół i lewo).
<style>
.box{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
width:100px;
height:100px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
<div class="box">Box with margin</div>Ostrzeżenie
Podobnie jak w przypadku wartości margin możemy podać konkretną wartość, możemy również podać wartość procentową.
Ostrzeżenie
Oprócz konkretnej wartości marginesu możemy również określić jego wartość procentową.
Skrócony zapis marginesu
W poprzednim przykładzie musieliśmy napisać 4 wiersze kodu, aby ustawić margines ze wszystkich stron elementu.
CSS udostępnia skrócony zapis właściwości margin, dzięki któremu możemy napisać krótszy kod.
Po określeniu właściwości margin możemy przypisać wartości marginesu, oddzielając je spacjami — odpowiednio dla góry, prawej strony, dołu i lewej strony (czyli zgodnie z ruchem wskazówek zegara).
<style>
.box {
margin: 10px 10px 10px 10px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
Ostrzeżenie dotyczące ujemnego marginesu
Marginesy mogą przyjmować wartości ujemne. Omawiane w następnej lekcji paddingi nie mogą mieć wartości ujemnej.
margin auto
Wartości auto właściwości margin użyjemy do wyśrodkowania elementów w poziomie. Niezależnie od rozdzielczości ekranu element zostanie wyśrodkowany poziomo.
Załóżmy, że ekran ma szerokość 1200px, a nasz element 400px. Element zostanie wyśrodkowany, pozostawiając po 400px wolnego miejsca z lewej i prawej strony.
<style>
.box {
width:200px;
margin: auto;
background-color: powderblue;
}
</style>
<div class="box">
This element will be horizontally
centered because
it has margin: auto;
</div>Gratulacje
Gratulacje 🎉
W tej sekcji poznaliśmy marginesy CSS.
W następnej sekcji poznamy paddingi CSS.
Często zadawane pytania
Czy lekcja „Margines” jest bezpłatna?
Tak — pełny tekst „Margines” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 1 lekcji w sumie.
Co nauczysz się w „Margines”?
Margines Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?
Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 1.
Ile czasu zajmuje lekcja „Margines”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?
Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.