https://jak.mazovia.edu.pl/api.php?action=feedcontributions&feedformat=atom&user=JannetteLayman4 2026-10-27T05:04:14Z Wkład użytkownika MediaWiki 1.42.1 https://jak.mazovia.edu.pl/index.php?title=Jeden_odst%C4%99p_czy_dwa%3F_Kiedy_marginesy_pionowe_si%C4%99_%C5%82%C4%85cz%C4%85&diff=1118591 2026-10-19T09:46:03Z

<p>JannetteLayman4: Utworzono nową stronę &quot;Zupełnie inaczej podchodzi się do problemu, gdy elementy mają układ oparty na flexboxie lub gridzie. W tych modelach białe znaki między elementami nie generują odstępu, bo elementy nie są już układane jak znaki w wierszu tekstu. To najczystsze rozwiązanie, jeśli nie musisz wspierać bardzo starych przeglądarek. Wystarczy ustawić na kontenerze display: flex i zadbać o gap albo marginesy, a odstępy staną się w pełni kontrolowane.&lt;br&gt;&lt;br&gt;Podsumowuj…&quot;</p> <hr /> <div>Zupełnie inaczej podchodzi się do problemu, gdy elementy mają układ oparty na flexboxie lub gridzie. W tych modelach białe znaki między elementami nie generują odstępu, bo elementy nie są już układane jak znaki w wierszu tekstu. To najczystsze rozwiązanie, jeśli nie musisz wspierać bardzo starych przeglądarek. Wystarczy ustawić na kontenerze display: flex i zadbać o gap albo marginesy, a odstępy staną się w pełni kontrolowane.&lt;br&gt;&lt;br&gt;Podsumowując: flex-basis nadpisuje width, gdy obie są ustawione i element jest flexem. Wartość auto w flex-basis sprawia, że width jest brany pod uwagę. Pamiętaj o osi głównej i właściwościach min/max. Świadome używanie tych mechanizmów pozwoli uniknąć walki z układem i niepotrzebnych poprawek.&lt;br&gt;&lt;br&gt;Warto pamiętać, że flex-basis działa tylko na głównej osi. Dla flex-direction: row będzie to szerokość, a dla column — wysokość. Wtedy width (lub height) może być ignorowany w zależności od osi. Jeśli ustawisz flex-direction: column i podasz width, to width nadal będzie działać jako rozmiar w poprzek osi, ale flex-basis będzie kontrolować wysokość. To rozróżnienie jest kluczowe w praktyce.&lt;br&gt;&lt;br&gt;Kiedy section wchodzi w article, a kiedy article w section Układ article wewnątrz section sprawdza się, gdy section grupuje wiele niezależnych materiałów. Przykład: section „Aktualności&quot; zawiera trzy osobne artykuły, każdy z własnym tytułem, datą i autorem. Odwrotny układ — section wewnątrz article — stosujesz, gdy jeden tekst dzieli się na logiczne części. Długi poradnik może mieć wewnątrz artykuły sekcje „Przygotowanie&quot;, „Wdrożenie&quot; i „Najczęstsze problemy&quot;. Każda z nich dostaje własny nagłówek h2, a całość pozostaje jednym artykułem.&lt;br&gt;&lt;br&gt;W praktyce rozpoznasz to po zachowaniu marginesów i wysokości. Blok przyjmuje pole szerokości, wysokości i marginesy pionowe, które realnie odsuwają sąsiednie elementy. Element liniowy ignoruje pionowe marginesy i wysokość — nie przesunie tekstu w górę ani w dół, choć przyjmie odstępy poziome. Dlatego akapit z marginesem dolnym tworzy przerwę między sobą a następnym akapitem, a link z takim samym marginesem dolnym nie zrobi nic.&lt;br&gt;&lt;br&gt;Rozwiązania są trzy. Pierwsze: dodaj padding lub obramowanie do rodzica. Drugie: ustaw overflow: hidden albo display: flow-root na kontenerze. Trzecie: zrezygnuj z marginesów na rzecz odstępów między elementami, na przykład gap w kontenerze z display: flex lub grid. Ostatnia metoda jest najprzewidywalniejsza, bo eliminuje zapadanie u źródła.&lt;br&gt;&lt;br&gt;Mechanizm jest prosty: jeśli akapit ma margines dolny 20 pikseli, a następny margines górny 32 piksele, odległość między nimi wyniesie 32 piksele, nie 52. Gdy wartości są równe, odstęp pozostaje taki sam. Marginesy ujemne też biorą udział w tym rozrachunku — wtedy odejmuje się je od siebie, a wynikiem jest największa wartość dodatnia lub najbardziej ujemna, zależnie od znaków.&lt;br&gt;&lt;br&gt;Drugi typowy problem to zagnieżdżanie bloku w elemencie liniowym. Przeglądarka to naprawi, ale zrobi to po swojemu i struktura się rozjedzie. Jeśli w linku umieszczasz akapit albo listę, zamień link na element blokowy. I odwrotnie: nie wkładaj elementu blokowego do środka zdania, bo przerwie linię w miejscu, którego się nie spodziewasz. Zasada jest prosta — blok zawiera bloki albo tekst, element liniowy zawiera tylko tekst i inne elementy liniowe.&lt;br&gt;&lt;br&gt;Warto też wiedzieć, że część elementów ma domyślny display narzucony przez przeglądarkę i można go zmienić, ale nie zawsze wypada. Nagłówki, akapity, listy i sekcje są blokowe z założenia. Linki, pogrubienia, kursywa i fragmenty kodu są liniowe. Zmiana tego domyślnego zachowania bywa sensowna przy budowie menu albo przycisków, ale w zwykłym tekście rzadko prowadzi do czegoś dobrego. Zanim ją wprowadzisz, sprawdź, czy problemu nie da się rozwiązać paddingiem, marginesem albo trybem inline-block.&lt;br&gt;&lt;br&gt;Kaskada to mechanizm, w którym przeglądarka zbiera wszystkie reguły pasujące do danego elementu, a potem rozstrzyga, która z nich ma największą moc. W praktyce najczęściej wygrywa ta, która pojawia się później w źródle — ale tylko wtedy, gdy pozostałe warunki są równe. Jeśli dwie reguły mają identyczną specyficzność i obie pasują do tego samego elementu, późniejsza po prostu nadpisuje wcześniejszą. To nie jest błąd ani widzimisię przeglądarki, tylko celowa zasada, która pozwala nadpisywać style bez zmiany selektorów.&lt;br&gt;&lt;br&gt;Najczęstszy błąd polega na tym, że ktoś chce powiększyć obszar klikalny linku i nadaje mu display: block. Efekt bywa odwrotny do zamierzonego: link zajmuje całą szerokość i łamie akapit w losowym miejscu. Lepszym rozwiązaniem jest display: inline-block — element nadal płynie w tekście, ale przyjmuje padding i wysokość, nie rozrywając linii. Trzeba tylko pamiętać, że inline-block potrafi dodać niewielki odstęp wynikający z białych znaków w kodzie.</div>

JannetteLayman4 https://jak.mazovia.edu.pl/index.php?title=U%C5%BCytkownik:JannetteLayman4&diff=1118589 2026-10-19T09:46:01Z

<p>JannetteLayman4: Utworzono nową stronę &quot;Entuzjasta urządzania mieszkań na co dzień. Piszę o tym, jak łączyć wygodę z ładnym wnętrzem. Najbardziej lubię proste rozwiązania, które da się zrobić samemu.&quot;</p> <hr /> <div>Entuzjasta urządzania mieszkań na co dzień. Piszę o tym, jak łączyć wygodę z ładnym wnętrzem. Najbardziej lubię proste rozwiązania, które da się zrobić samemu.</div>

JannetteLayman4