Poznawanie width, height, margin i padding
Poznają Państwo, jak width, height, margin i padding definiują wymiary elementów oraz odstępy.
Poznawanie width, height, margin i padding to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. 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 CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Koncepcja modelu pudełkowego
Każdy element HTML jest renderowany jako prostokątne pudełko. CSS-owy model pudełkowy opisuje cztery warstwy tworzące to pudełko, licząc od środka: zawartość → dopełnienie → obramowanie → margines.
width i height
width i height ustawiają wymiary obszaru zawartości. Domyślnie do tego rozmiaru dodawane są dopełnienie i obramowanie.
<div class="box"></div>
padding
padding to przezroczysta przestrzeń wewnątrz obramowania, między zawartością a krawędzią obramowania. Jest częścią obszaru elementu reagującego na kliknięcia i wypełnianego tłem.
<div class="card">Card content</div>
Właściwości składowe padding
Każdą stronę można ustawić osobno:
<div class="element">Padded element</div>
margin
margin to przezroczysta przestrzeń na zewnątrz obramowania. Odsuwa od siebie inne elementy. Ujemne marginesy przybliżają elementy do siebie lub powodują ich nakładanie.
<div class="section">Centered section with bottom margin</div>
Łączenie marginesów
Marginesy pionowe łączą się między sąsiednimi elementami blokowymi: rzeczywisty odstęp jest równy większemu z dwóch marginesów, a nie ich sumie. Marginesy poziome nigdy się nie łączą.
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
Zapobieganie łączeniu marginesów
Łączeniu marginesów zapobiega się w następujących sytuacjach:
- elementy są elementami flex lub grid
- element nadrzędny ma
overflow: hidden - element nadrzędny ma
paddingmiędzy sobą a pierwszym elementem potomnym - element wierszowy oddziela elementy równorzędne
Marginesy auto
Ustawienie poziomych marginesów na auto dla elementu blokowego o stałej szerokości wyśrodkowuje go w kontenerze. To klasyczna technika wyśrodkowywania.
<div class="centered">Centered block, max 800px wide</div>
min-width max-width min-height max-height
Ograniczaj wymiary za pomocą minimalnych i maksymalnych wartości, aby elementy pozostały czytelne na ekranach o różnych rozmiarach:
<div class="content">Readable content column capped at 65 characters wide.</div>
Obliczanie całkowitego rozmiaru elementu
W domyślnym modelu content-box całkowita szerokość = width + padding-left + padding-right + border-left + border-right. Może to być zaskakujące i dlatego preferowany jest model border-box.
Logiczne właściwości marginesów i dopełnienia
Nowoczesny CSS oferuje logiczne odpowiedniki: margin-block, margin-inline, padding-block-start itd. Automatycznie dostosowują się one do kierunku pisma.
<div class="card">Logical padding-block/inline</div>
Szybkie sprawdzenie
Jakie warstwy obejmuje całkowita renderowana szerokość elementu blokowego w domyślnym modelu pudełkowym?
Podsumowanie
Warstwy modelu pudełkowego to zawartość, dopełnienie, obramowanie i margines. Dopełnienie znajduje się wewnątrz obramowania, a margines na zewnątrz. Marginesy pionowe łączą się między sąsiednimi elementami równorzędnymi. Używaj margin: 0 auto ze stałą szerokością, aby wyśrodkowywać elementy blokowe.
Często zadawane pytania
Czy lekcja „Poznawanie width, height, margin i padding” jest bezpłatna?
Tak — pełny tekst „Poznawanie width, height, margin i padding” 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 CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Poznawanie width, height, margin i padding”?
Poznają Państwo, jak width, height, margin i padding definiują wymiary elementów oraz odstępy. Ćwiczysz CSS Academy 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ąć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy 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 4.
Ile czasu zajmuje lekcja „Poznawanie width, height, margin i padding”?
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 CSS Academy?
Tak. Każda lekcja CSS Academy 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.
Wszystkie lekcje w tym kursie
- Poznawanie width, height, margin i padding
- Style, szerokość i kolor obramowania
- box-sizing: content-box i border-box
- Outline i box-shadow