Zmień dopełnienie i górne odstępy w CSS. Górne dopełnienie CSS: Marginesy dopełniające pozycjonujące treść Div

Marginesy i dopełnienie to bardzo ważne style podczas tworzenia strony HTML. Pozwalają dokładniej ustawić elementy, stworzyć ramę z niezbędnymi szczelinami itp. Obydwa style są bardzo podobne i pełnią podobne funkcje. Ale nadal istnieją różnice.

Elementy mogą być zagnieżdżane lub umieszczane obok siebie. Spójrzmy na następujący przykład:

Mamy dwa stoły, cytrynowy i niebieski, umieszczone jeden pod drugim. Tabele składają się z jednej komórki. W pierwszej komórce tabeli znajduje się czerwony blok. Na tym przykładzie przyjrzyjmy się, jak działają marginesy i wcięcia.

Pola są ustawiane według stylu wyściółka. Ten styl dotyczy tylko elementów kontenerów, które mogą zawierać inne elementy. Styl umożliwia ustawienie marginesu pomiędzy krawędziami elementu a jego zawartością. Styl margines pozwala ustawić wcięcie od elementu do najbliższych krawędzi innego elementu. Granice innego elementu mogą być krawędziami kontenera nadrzędnego, a także krawędziami samej strony.

Istnieje kilka sposobów ustawiania tych stylów. Na przykład bezpośrednio określ rozmiar wszystkich marginesów lub wcięć za pomocą jednego argumentu w jakiejś jednostce miary (px, ex, em, pt, cm itd.):

margines: 3 piksele;

dopełnienie: 3px 5px;

pierwszy określi wielkość marginesów/wcięć na górze i na dole, drugi - po lewej i prawej stronie. Po podaniu trzech argumentów:

margines: 3px 5px 2px; pierwszy to margines/wcięcie u góry, drugi po lewej i prawej stronie, trzeci na dole. Z czterema argumentami:, dopełnienie: 3px 5px 2px 6px;, margines: 3px 5px 2px 6px;, pierwszy to margines/odstęp na górze, drugi po prawej stronie, trzeci na dole, czwarty po lewej stronie. Łatwo to zapamiętać: najpierw od góry, potem zgodnie z ruchem wskazówek zegara. Dodatkowo możesz ustawić marginesy i dopełnienie dla konkretnej krawędzi oddzielnie, korzystając z odpowiednich stylów:, wyściółka, dopełnienie-prawe, wyściełane dno, dopełnienie-lewe górny margines

Na rysunku czerwony blok znajduje się wewnątrz komórki tabeli i przylega do jej krawędzi, co oznacza, że ​​komórka nie ma marginesów. Ustawmy marginesy komórek za pomocą stylu:

W efekcie strona zmieni się na następującą:

Przyjrzyjmy się teraz wgłębieniom. Dwie tabele sąsiadują ze sobą, jeśli chcemy je trochę od siebie odsunąć, możemy zastosować wcięcia. Istnieją dwie opcje: albo ustawić dolne wcięcie pierwszej tabeli, albo górne wcięcie drugiej tabeli. Użyjmy drugiego:

Należy pamiętać, że wcięcie ustawiamy konkretnie na tabelę, a nie na komórkę tabeli, jak ma to miejsce w przypadku pól. Oto wynik:

Nawiasem mówiąc, w pierwszym przypadku (odstęp między czerwonym blokiem a granicami komórki macierzystej) ten sam efekt można uzyskać, ustawiając wcięcia bloku. Ogólnie rzecz biorąc, jeśli coś nie jest jasne, daj nam znać w komentarzach.

Kod HTML strony testowej:

Witamy na moim blogu. CSS (kaskadowe arkusze stylów) zapewnia wiele opcji dostosowywania wygląd strony internetowe. Dzisiaj chciałbym pokrótce pokazać jak zdefiniować w CSS dopełnienie na górze lub z dowolnej innej strony dla dowolnego elementu.

Margines

Margines ustawia się za pomocą właściwości marginesu. Za jego pomocą można ustawić marginesy ze wszystkich czterech stron jednocześnie lub skorzystać z innych właściwości: margines-górny, margines-lewy, margines-prawy, margines-dolny, które pozwalają na wykonanie go tylko po jednej stronie.

Margines określa odległość, o jaką wybrana krawędź elementu zostanie odsunięta od innych elementów na stronie. Na przykład wpis:

P, div(
Margines u góry: 20 pikseli;
}

Oznacza to, że wszystkie bloki i akapity będą wcięte u góry o 20 pikseli, czyli ich górna krawędź zostanie odsunięta od sąsiadujących z nimi elementów o tę odległość.

Marginesy można zapisywać z każdej strony, korzystając tylko z jednej właściwości marginesu, do której zapisywane są 4 wartości z rzędu:

Dziew(
Margines: 20px 10px 20px 10px;
}

Wypełnienie zostanie podane odpowiednio od górnej, prawej, dolnej i lewej krawędzi. Ponieważ w tym przypadku są one równe po przeciwnych stronach, możemy to również zapisać w ten sposób:

Dziew(
Margines: 20px 10px;
}

Pierwsza wartość to margines na górze i na dole, a druga to margines po bokach.

Wcięcie

Wewnętrzne dopełnienie działa inaczej - nie odsuwa bloku od innych elementów, ale raczej dodaje tę przestrzeń w elemencie, odsuwając zawartość bloku od jego krawędzi. To wygodne. Gdzie widziałeś stronę internetową, w której tekst zaczyna się w lewym górnym rogu okna?

Nie widziałem tego, ponieważ twórcy stron internetowych zawsze używają wcięć zewnętrznych i wewnętrznych, aby tekst był jak najbardziej czytelny. Dopełnienie wewnętrzne określa się za pomocą właściwości padding, w której można podać jednocześnie 4 wartości oddzielone spacją, odpowiednio dla wszystkich krawędzi.

Podobnie jak w przypadku marginesu, możesz dodać nazwę boku i ustawić tylko dla niego odległość. Na przykład górne dopełnienie można zapisać za pomocą padding-top . Ogólnie rzecz biorąc, właściwość padding działa dokładnie tak samo jak właściwość margines.

Możesz na przykład podać ten fragment kodu:

Blok(
Szerokość: 200px;
Wypełnienie: 20 pikseli;
}

Jak myślisz, jaka będzie rzeczywista szerokość naszego elementu? Tutaj widać, że jest to 200 pikseli, ale dopełnienia dodają kolejne 20 z każdej strony, co daje w sumie 240 pikseli. Weź to pod uwagę podczas projektowania.

Chciałbym również zauważyć, że dopełnienie jest zwykle podawane tylko elementom blokowym; lepiej nie nadawać go elementom wbudowanym. Margines działa dobrze z dowolnymi elementami.

Witajcie, drodzy czytelnicy bloga! Dzisiaj będziemy kontynuować naukę o kaskadowych arkuszach stylów lub CSS. W poprzednich artykułach sprawdziliśmy już ogólnie układ blokowy witryny. W rezultacie zaczęliśmy mieć całkiem profesjonalne strony internetowe, ale czegoś im brakowało. Ale najprawdopodobniej brakuje im wcięć i ramek. Dzisiaj przyjrzymy się regułom stylu dotyczącym marginesu, dopełnienia i obramowania, które pozwalają ustawić wcięcia i ramki dla elementów HTML.

Opcje dopełniania CSS

Za pomocą kaskadowych arkuszy stylów możliwe jest ustawienie dwóch rodzajów wcięć.

1.Wcięcie to odległość od wyimaginowanej granicy elementu do jego zawartości. Wartość odległości określa się za pomocą parametru wyściółka. To wcięcie należy do samego elementu i znajduje się wewnątrz niego.

2. Margines— odległość pomiędzy krawędzią bieżącego elementu strony internetowej a krawędziami elementów sąsiadujących lub elementu nadrzędnego. Wielkość odległości ustalana jest przez obiekt margines. Wcięcie to znajduje się na zewnątrz elementu.

Dla przejrzystości zdjęcie:

Rozważmy na przykład komórkę wypełnioną tekstem. Następnie dopełnienie to odległość między wyimaginowaną krawędzią komórki a zawartym w niej tekstem. A zewnętrzny margines to odległość między granicami sąsiednich komórek. Zacznijmy od wyściółka.

Dopełnienie w CSS za pomocą dopełnienia (góra, dół, lewo, prawo)

Właściwości stylu padding-left, padding-top, padding-right i padding-bottom umożliwiają ustawienie wartości dopełnienia odpowiednio po lewej, górnej, prawej i dolnej części elementu strony internetowej:

wyściółka | dopełnienie w prawo | wyściółka na dole | dopełnienie po lewej stronie: wartość | zainteresowanie | dziedziczyć

Wielkość wcięcia można określić w pikselach (px), procentach (%) lub innych jednostkach akceptowalnych dla CSS. Przy podawaniu wartości procentowych wartość obliczana jest na podstawie szerokości elementu. Wartość dziedziczenia wskazuje, że jest dziedziczona od elementu nadrzędnego.

Na przykład w bieżącym akapicie zastosowałem regułę stylu, która ustawia lewe dopełnienie na 20 pikseli, górne na 5 pikseli, prawe na 35 pikseli i dolne na 10 pikseli. Wpis reguły będzie wyglądał następująco:

p.test(
dopełnienie po lewej: 20px;
górna część dopełnienia: 5px;
dopełnienie po prawej stronie: 35px;
dopełnienie-dół:10px
}

Reguła wyściółki kompozytowej pozwala określić wcięcia ze wszystkich stron elementu strony internetowej jednocześnie:

wyściółka:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Reguła prefabrykacji pozwala na użycie jednej, dwóch, trzech lub czterech wartości oddzielonych spacją. W tym przypadku efekt zależy od liczby wartości:

• jeśli podasz jedną wartość, ustawi ona wielkość wcięcia ze wszystkich stron elementu strony;
• jeśli podasz dwie wartości, pierwsza ustawi wielkość wcięcia u góry i u dołu, a druga - po lewej i prawej stronie;
• jeśli podasz trzy wartości, to pierwsza określi wielkość wcięcia u góry, druga – po lewej i prawej stronie, a trzecia – u dołu;
• jeśli zostaną podane cztery wartości, pierwsza ustawi wielkość wcięcia u góry, druga po prawej, trzecia u dołu, a czwarta po lewej stronie.

Zatem powyższą regułę CSS można maksymalnie skrócić i zapisać w następujący sposób:

p.test(wypełnienie: 5px 35px 10px 20px)

Właściwość marginesu lub marginesy w CSS

Atrybuty stylu margines-lewy, margines-górny, margines-prawy i margines-dolny umożliwiają ustawienie wartości marginesu, odpowiednio, lewego, górnego, prawego i dolnego:

górny margines | prawy margines | margines-dół | margines po lewej stronie:<значение>|automatycznie|dziedziczysz

Jak wspomniano powyżej, margines to odległość od granicy bieżącego elementu do granicy sąsiedniego elementu lub, jeśli nie ma sąsiadujących elementów, do wewnętrznej granicy kontenera nadrzędnego.

Wielkość wcięcia można określić w pikselach (px), procentach (%) lub innych jednostkach dozwolonych w CSS:

P(
margines po lewej stronie: 20px;
}
h1(
margines prawy: 15%;
}

Wartość auto oznacza, że ​​rozmiar wcięcia zostanie automatycznie obliczony przez przeglądarkę. Jeśli używasz notacji procentowej, wcięcia są obliczane w zależności od szerokość kontenera nadrzędnego. Co więcej, dotyczy to nie tylko marginesu lewego i prawego, ale także marginesu górnego i dolnego, marże procentowe będą liczone w zależności od szerokości, a nie wysokości kontenera.

Dopuszczalne jest stosowanie jako wartości wcięć zewnętrznych wartości ujemne:

P(
margines po lewej stronie: -20px;
}

Jeśli z dodatnimi wartościami wcięć sąsiadujące elementy zostaną odsunięte, to przy wartości ujemnej sąsiadujący blok zderzy się z elementem, dla którego ustawiliśmy takie ujemne przesunięcie.

Możemy również określić dopełnienie za pomocą atrybutu style margines. Ustawia wartości wcięć jednocześnie ze wszystkich stron elementu strony internetowej:

margines:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Podczas określania jednej, dwóch, trzech lub czterech wartości dopełnienia ta właściwość podlega tym samym prawom, co reguła dopełnienia.

Opcje obramowania przy użyciu właściwości obramowania

Podczas ustawiania ramek istnieją trzy typy parametrów:

• border-width — grubość granicy;
• border-color — kolor obramowania;
• border-style — typ linii, za pomocą której będzie rysowana ramka.

Zacznijmy od parametru grubości ramy:

szerokość obramowania: [wartość | cienki | średni | gruby] (1,4) | dziedziczyć

Grubość ramy można określić w pikselach lub innych jednostkach dostępnych w CSS. Zmienne cienkie, średnie i grube ustawiają grubość obramowania odpowiednio na 2, 4 i 6 pikseli:

szerokość obramowania: średnia;

Podobnie jak w przypadku właściwości dopełnienia i marginesu, parametr border-width pozwala na jedną, dwie, trzy lub cztery wartości, ustawiając w ten sposób szerokość obramowania dla wszystkich stron jednocześnie lub dla każdej strony osobno:

szerokość obramowania: 5px 3px 5px 3px

Dla bieżącego akapitu ustaw grubość górnej krawędzi na 1px, prawej 2px, dolnej 3px i lewej 4px, korzystając z reguły (szerokość obramowania: 1px 2px 3px 4px;)

Używając atrybutów stylu border-left-width, border-top-width, border-right-width i border-bottom-width, możesz ustawić grubość odpowiednio lewej, górnej, prawej i dolnej strony obramowania:

szerokość-lewego-obramowania|szerokość-górnego-obramowania|szerokość-prawego-obramowania|szerokość-obramowania-dolnego: cienkie|średnie|grube|<толщина>| dziedziczyć

Następnym parametrem jest kolor obramowania, którym możesz sterować kolor ramki:

kolor obramowania: [kolor | przezroczysty] (1,4) | dziedziczyć

Właściwość pozwala ustawić kolor obramowania dla wszystkich stron elementu jednocześnie lub tylko dla określonych. Jako wartość można zastosować metody określania kolorów akceptowane w HTML: kod szesnastkowy, słowa kluczowe itp.:

p (szerokość obramowania: 2 piksele; kolor obramowania: czerwony)

transparent ustawia przezroczysty kolor obramowania, a dziedziczy dziedziczy wartość elementu nadrzędnego. Domyślnie, jeśli kolor obramowania nie zostanie określony, zostanie zastosowany kolor czcionki użytej w danym elemencie.

Używając atrybutów stylu border-left-color, border-top-color, border-right-color i border-bottom-color, możesz ustawić kolor odpowiednio lewej, górnej, prawej i dolnej strony obramowania:

kolor-obramowania-lewego|kolor-górnego-obramowania|kolor-obramowania-prawego|kolor-dolnego-obramowania: przezroczysty|<цвет>| dziedziczyć

I ostatni parametr styl obramowania określa typ ramki:

styl obramowania: (1,4) | dziedziczyć

Typ ramy można określić dla wszystkich stron elementu jednocześnie lub tylko dla określonych. Jako wartości możesz użyć wielu słów kluczowych. Wygląd będzie zależał od używanej przeglądarki i grubości ramki. Oznaczający nic jest używany domyślnie i nie wyświetla ramki, a jej grubość jest ustawiona na zero. Ukryta wartość ma ten sam efekt. Wynikową ramkę dla pozostałych wartości w zależności od grubości przedstawia poniższa tabela:

Atrybuty stylu border-left-style, border-top-style, border-right-style i border-bottom-style określają styl linii, które będą rysowane po lewej, górnej, prawej i dolnej stronie ramki, odpowiednio:

styl-obramowanie-lewy|styl-obramowanie-górne|styl-obramowanie-prawy|styl-obramowanie-dół: brak|ukryty|kropkowany|przerywany|pełny|podwójny|rowek|grzbiet|wstawka|początek|dziedziczenie

Podobnie jak w przypadku opcji dopełniania i dopełniania, istnieją ogólna właściwość graniczna. Pozwala jednocześnie ustawić grubość, styl i kolor obramowania wokół elementu:

granica: | dziedziczyć

Wartości mogą być w dowolnej kolejności, oddzielone spacjami:

td (obramowanie: 1 piksel w kolorze żółtym)

Aby ustawić obramowanie tylko po niektórych stronach elementu, dostępne są właściwości border-top, border-bottom, border-left, border-right, które umożliwiają ustawienie parametrów górnego, dolnego, lewego i prawa strona struktura

Pozostaje tylko podsumować:

• dla zadania wyściółka korzystamy z nieruchomości wyściółka;
• skonfigurować marginesy jest zasada margines;
• parametry ramki są określane za pomocą atrybutu granica.

Zaznaczam, że to wszystko właściwości CSS zwiększyć rozmiar elementu strony internetowej. Dlatego jeśli zmienimy grubość obramowania lub rozmiar wyściółki pojemników blokowych tworzących projekt strony internetowej, będziemy musieli odpowiednio zmienić rozmiary tych pojemników, w przeciwnym razie mogą się one przesunąć, a projekt zostanie złamany.

To wszystko, do zobaczenia następnym razem!

Dziś porozmawiamy z Tobą trochę o zasadach układu, a mianowicie o sposobach organizowania wcięć w witrynie dla poszczególnych elementów.

Elementem wymagającym wcięcia może być tekst, obraz, tabela lub dowolny inny element HTML. Najważniejsze jest przestrzeganie kilku ważnych zasad, o których teraz powiem.

Jeśli dopiero tworzysz witrynę, zalecam wstawienie następujących właściwości na górze głównego pliku stylu:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) *:before, *:after ( -webkit-box-sizing: border- box; -moz-rozmiar-pudełka: obramowanie-pudełko; rozmiar-pudełka: obramowanie-pudełko )

Dlaczego jest to konieczne, pytasz? Odpowiadam na Twoje pytanie, podając jasny przykład.

Załóżmy, że masz taki element układu:

Tak będzie wyglądać opcja bez użycia opisanych powyżej właściwości (górny element) i z ich użyciem (dolny element):

Co tu można zobaczyć? Że szerokość elementu w pierwszej wersji (bez użycia właściwości) stała się większa niż określona ze względu na dodane wcięcia, co nie jest do końca wygodne i poprawne pod względem układu.

Opcja z właściwościami jest o wiele bardziej estetyczna, ale należy z niej korzystać świadomie, bo dodając je do gotowej witryny, ryzykujesz zły projekt i „ból głowy” w postaci doprowadzenia tego wszystkiego do odpowiedniej formy . Wszystkie projekty, które miałem okazję prowadzić od podstaw, nie były pozbawione tych właściwości.

A teraz porozmawiajmy o opcjach organizowania wcięć elementów w Twojej witrynie za pomocą wizualnych przykładów.

Dopełnienie za pomocą właściwości CSS „padding”.

Abyś zrozumiał całą logikę rzeczy, weźmy jako przykład następujący fragment układu:

z własnymi stylami:

Test_div (szerokość: 250px; obramowanie: 1px pełna;)

Wersja wizualna wygląda następująco:

Jaka jest własność ” wyściółka„? Pomaga uporządkować wewnętrzne wcięcia w określonych elementach. Dodajmy do naszego układu wewnętrzne wypełnienie o wielkości 10 pikseli:

Test_div (szerokość: 250 pikseli; obramowanie: 1 piksel; dopełnienie: 10 pikseli; // Dopełnienie 10 pikseli)

Wizualnie wygląda to tak:

Liczba 10 we właściwości oznacza, że ​​wewnątrz określonych elementów, z każdej z ich czterech stron, należy dodać margines 10px. Piksele (px) można zastąpić wartościami procentowymi lub innymi wartościami obsługiwanymi przez CSS.

Istnieją dwie opcje oznaczenia stron, od których należy wykonać wcięcia.

Pierwszy- następuje to z wyraźnym wskazaniem stron:

Wyściółka u góry: 10px; // 10px górne dopełnienie po prawej: 10px; // 10px dopełnienie po prawej stronie dopełnienia: 10px; // Wewnętrzne dopełnienie 10px od dolnego dopełnienia po lewej stronie: 10px; // 10px lewego dopełnienia

W tym przypadku każda ze stron korzysta ze swojej własności. I drugi:

Dopełnienie: 10px 0 0 0; // Wewnętrzne dopełnienie 10px na górze, cała reszta - 0px dopełnienia: 10px 0; // Wewnętrzne wypełnienie 10px na górze i na dole oraz po bokach - 0px padding: 0 10px; // Wewnętrzne wypełnienie 0px u góry i u dołu oraz 10px po bokach

Oto prosta lista wartości, z których każda odpowiada swojej stronie. Boki są ustawione w ten sposób: pierwsza wartość jest na górze, druga na prawo, trzecia na dole i czwarta w lewo, czyli wszystko zgodnie z ruchem wskazówek zegara.

Jeśli są dwie wartości (górna i prawa), oznacza to, że w lustrze te same wartości idą w dół i w lewo i to jest jedyny sposób. Wszystko wydaje się być jasne. Jeśli nie chcesz ustawiać wcięcia dla jednego ze stron, ustaw wartość dla tej strony na „0”. Ta opcja podoba mi się bardziej, ponieważ jest bardziej kompaktowa, ale w moich wysiłkach korzystałem z pierwszej opcji.

Ten typ wcięcia jest dobry do oddzielania tekstu, zawartości komórek tabeli itp. informacje tekstowe. Aby oddzielić same elementy, podobnie jak w powyższym przykładzie, istnieje inna właściwość.

Margines przy użyciu właściwości CSS „margin”

Cecha wyróżniająca nieruchomość” margines" oznacza, że ​​wcięcie jest dodawane na zewnątrz elementu, czyli na zewnątrz.

Istnieją również dwie możliwości dodania tutaj.

Pierwszy– z wyraźnym wskazaniem strony:

Margines u góry: 10 pikseli; // Margines 10px na prawym górnym marginesie: 10px; // Margines 10px na prawym marginesie-dolny: 10px; // Margines zewnętrzny 10px od lewego dolnego marginesu: 10px; // Lewy margines 10 pikseli

Drugi– z listą wartości, z których każda odpowiada swojemu bokowi:

Margines: 10px 0 0 0; // Margines zewnętrzny 10px na górze, cała reszta - margines 0px: 10px 0; // Margines 10px na górze i na dole oraz po bokach - 0px margines: 0 10px; // Zewnętrzne wypełnienie 0px u góry i u dołu oraz 10px po bokach

Nie będę tutaj opisywał wszystkich niuansów pracy z zasadami, wszystko jest takie samo jak w przypadku nieruchomości ” wyściółka„, napisano o nim powyżej.

Używamy marginesu o następującej wartości:

Test_div (szerokość: 250px; obramowanie: 1px pełne; margines: 10px; // Margines 10px)

Wizualnie będzie to wyglądać następująco:

Jak widać na przykładzie, w tym przypadku dodawany jest margines zewnętrzny w celu oddzielenia określonych elementów.

Ważna funkcja: Jeśli przyjrzysz się uważnie wynikowi, możesz zauważyć, że sąsiednie wcięcia elementów nie sumują się. Oznacza to, że jeśli pierwszy element ma dolny margines o wartości 10 pikseli, a drugi element ma margines górny o tej samej wartości, to całkowita odległość między nimi również będzie wynosić 10 pikseli. Jeśli odpowiednio 10 i 15, wówczas suma wynosi 15 i tak dalej.

Ta opcja wcięcia jest często stosowana w tekście, a mianowicie przy projektowaniu akapitów, a także w elementach mających widoczne krawędzie.

Ale obie właściwości nie ograniczają się tylko do tych elementów. Sam wybierasz opcje ich wykorzystania, ja po prostu starałem się przekazać Ci podstawy na ich temat.

Układ CSS zawsze był prostokątny. Wszelkie gładkie linie należą do kompetencji dewelopera. Reguły stylu zapewniają wystarczającą liczbę opcji, aby nadać stronie gładki kształt w granicach rozdzielczości ekranu. Jednak każdy element układu jest zawsze prostokątem, w którym rozmieszczenie informacji regulują reguły CSS.

Wypełnienie ze wszystkich stron jest ważne dla każdego elementu strony, gdy jest on ustawiony absolutnie, a górne dopełnienie CSS jest szczegółowo zdefiniowane, ponieważ ma znaczenie dla różnych elementów, szczególnie tych wbudowanych.

Podstawowe zasady pozycjonowania

Element blokowy ma regułę wcięcia od boków elementu, który zawiera (margines), regułę wcięcia elementów znajdujących się wewnątrz (wypełnienie) oraz szerokość obramowania (border), które również można zastosować.

Szczególne znaczenie ma wcięcie u góry. CSS w bloku wiąże reguły dopełniania z regułami dla elementów znajdujących się w bloku absolutnie i względnie.

Powszechna praktyka w przypadku reguł CSS: możesz określić to samo wypełnienie ze wszystkich stron, parami góra/dół i prawa/lewa strona lub dla każdej strony osobno. Na przykład,

• margines: 10px;
• dopełnienie: 10px20px;
• dopełnienie: 10px20px30px40px.

W pierwszym przypadku ustawia się wcięcie elementu od boków pojemnika zewnętrznego, w którym się on znajduje. W drugim przypadku marginesy u góry i u dołu wynoszą 10px, po lewej i prawej stronie - 20px. W trzecim przypadku wielkość wcięć jest wskazana ze wszystkich stron: u góry, po prawej, u dołu i po lewej stronie.

We wszystkich tych przypadkach wcięcie górny CSS to 10 pikseli.

Reguły zmieniające położenie elementów

Jeśli element układu nie jest ustawiony bezwzględnie, jest on umieszczany w ogólnej kolejności tworzenia strony.

Jeśli zdefiniujemy dopełnienie górnego CSS w elemencie scCurrInfo, cel zostanie osiągnięty, ale na poziomie li nie.

W tym przykładzie, używając reguły dopełniania: 40px; wymaga odpowiedniego zmniejszenia reguł szerokości i wysokości o 80px. W W przeciwnym razie Rozmiar bloku scCurrInfo przekroczy granice bloku zewnętrznego.

Jeśli usuniemy regułę dopełnienia z opisu scCurrInfo, ale dodamy ją z wartością 20px do opisu stylu elementu listy, otrzymamy tylko górne wcięcie. CSS nie zastosuje tej wartości do innych stron.

Naturalnie, to zastosowanie zasady wcięcia dotyczy każdego elementu li.

Ogólne praktyki formatowania treści

Niektórzy programiści osiągają doskonałość, układając strony za pomocą elementów blokowych. Podobno jest to klasyczna praktyka – zaczynać od tabelek, a kończyć własny proces edukacyjny klockami.

Dowolność tkwiąca w układzie bloków jest fascynująca, a wyobraźni dewelopera nie mogą ograniczać rygorystyczne zasady tabeli: tylko wiersze, tylko komórki, łączące się tylko w poziomie i w pionie. Nie ma nic szczególnego w ideach relacyjnych.

Tymczasem stoły, oprócz oczywistych wad, mają wiele zalet jakościowych. Tworząc dopełnienie na górze, CSS bierze pod uwagę dopełnienie po lewej, prawej stronie (dół to wyjątkowy moment). Reguły komórek tabeli umożliwiają kontrolowanie wyrównania w pionie i poziomie. Używając stylów wierszy i łącząc je ze stylami komórek, można tworzyć złożone widoki treści.

Zwykła reprezentacja strony w postaci prostokątów wcale nie przeszkadza w przedstawieniu jej w formie tabeli. To też są prostokąty, ale są też komórkami tabeli, czyli mają swoje własne reguły, które uzupełniają reguły bloków.

Absolutne pozycjonowanie

Blokuj z regułą POSITION: bezwzględna ; będzie zlokalizowany w miejscu określonym przez jego współrzędne względem bloku, w którym się znajduje.

Cechą charakterystyczną reguł CSS jest to, że w większości przypadków „praktyka jest najlepszym kryterium prawdy”, zwłaszcza gdy wymagana jest kompatybilność między przeglądarkami, a układ jest wykonywany ręcznie, lepiej jest studiować pełnoprawne podręczniki na kaskadowych arkuszach stylów.

Korzystanie z tabel często powoduje problemy z przesunięciem zawartości komórek. Podobne przesunięcie w obrębie bloku nie zawsze wpływa na wszystkie elementy. Eksperymentując, możesz osiągnąć pożądany rezultat. Zadanie banalne: jak usunięcie górnego dopełnienia nie zawsze jest trywialnym rozwiązaniem dla CSS.

W niektórych przypadkach, gdy musisz ułożyć elementy strony w trzewiach jakiegoś popularnego systemu zarządzania treścią strony internetowej, nadal musisz zwracać uwagę nie tylko na praktykę eksperymentalną, ale także spojrzeć na doświadczenia swoich kolegów.