Logiczne marginesy, dopełnienia i obramowania
Nauczy się Pan/Pani zastępować top/right/bottom/left ich logicznymi odpowiednikami start/end/block/inline.
Logiczne marginesy, dopełnienia i obramowania to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 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.
Logiczne odpowiedniki odstępów
Fizyczne właściwości odstępów mają logiczne odpowiedniki korzystające z kierunków blokowego i inline:
margin-top→margin-block-startmargin-bottom→margin-block-endmargin-left→margin-inline-startmargin-right→margin-inline-end
Logiczne właściwości skrótowe
Nowe właściwości skrótowe obejmują obie strony blokowe albo obie strony inline:
<div class="card">Card with logical spacing</div>
Centrowanie za pomocą margin-inline: auto
Klasyczny wzorzec centrowania ma teraz logiczny odpowiednik:
<div class="container">Centered container</div>
Logiczne właściwości ramek
Ustawiaj ramki po stronach logicznych:
<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>
Logiczne właściwości pozycjonowania
Właściwości pozycjonowania również mają logiczne odpowiedniki:
top→inset-block-startbottom→inset-block-endleft→inset-inline-startright→inset-inline-end
Skrót inset
Właściwość inset jest już logicznym skrótem dla wszystkich czterech stron. inset-block i inset-inline umożliwiają sterowanie dwiema osiami.
<div class="wrap"><div class="overlay"></div></div>
Logiczne właściwości wymiarów
Width i height mają logiczne odpowiedniki:
<div class="box">Sized box</div>
Porównanie: fizyczne a logiczne
Pasek boczny z ramką po stronie początkowej:
<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>
Logiczne wartości float i clear
Właściwości float i clear obsługują teraz wartości logiczne:
<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>
Logiczne text-align
text-align: start i text-align: end to logiczne alternatywy dla left i right, które automatycznie dostosowują się do kierunku tekstu.
<div class="nav-link">Aligned to the start (left in LTR)</div>
Strategia migracji
W nowym kodzie preferuj właściwości logiczne. W istniejącym kodzie refaktoryzuj jeden komponent naraz. Priorytet migracji: odstępy (margin/padding), ramki, wymiary, pozycjonowanie.
Szybkie sprawdzenie
Która właściwość logiczna jest odpowiednikiem margin-left w układzie LTR, który w RTL powinien stać się margin-right?
Podsumowanie
Logiczne właściwości margin, padding i border używają kierunków block i inline zamiast fizycznych top/right/bottom/left. Skróty takie jak margin-block, padding-inline i inset-block obejmują obie strony jednocześnie. W nowym kodzie preferuj właściwości logiczne dla wszystkich odstępów, aby uzyskać automatyczną obsługę RTL i pionowych trybów pisma.
Często zadawane pytania
Czy lekcja „Logiczne marginesy, dopełnienia i obramowania” jest bezpłatna?
Tak — pełny tekst „Logiczne marginesy, dopełnienia i obramowania” 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 „Logiczne marginesy, dopełnienia i obramowania”?
Nauczy się Pan/Pani zastępować top/right/bottom/left ich logicznymi odpowiednikami start/end/block/inline. Ć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 3 z 4.
Ile czasu zajmuje lekcja „Logiczne marginesy, dopełnienia i obramowania”?
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
- Dlaczego właściwości logiczne: umiędzynarodowienie
- Kierunki blokowy i liniowy
- Logiczne marginesy, dopełnienia i obramowania
- Właściwości logiczne w układach RTL