Wartość marginesu i możliwości w CSS

CBS Magrina kontroluje wcięcie elementów. Elementy w html to prostokąty. Mają granice, marginesy i marginesy.

Obszar marginesu to przestrzeń poza granicami elementu. Właściwość służy do ustawiania odległości między elementami i pozycjonowania ich na stronie.

Wcięcie

Właściwość Margines w CSS można ustawić na%, px, vh / vw, em i rem. Wartość marginesu może być dziedziczona z elementu nadrzędnego (dziedziczenie) lub automatycznie obliczana przez przeglądarkę (auto). Wartości dla marginesu w CSS można określić na wiele sposobów (przykłady podano w jednostkach emulowalnych, w zależności od rozmiaru czcionki elementu).

Sposoby ustawiania wartości dla wcięć:

• dla każdej strony (góra, prawo, dół, lewo) elementu (na przykład określono wartość górnego wcięcia zewnętrznego od krawędzi elementu środkowego);

 .center {margin-top: 1em;} 

• dla przeciwnych stron (najpierw wartości dla górnego i dolnego, potem dla lewego i prawego);

 .center {margin: 1em, 0.5em;} 

• dla trzech stron (wartość marginesu-góry jest wskazana jako pierwsza, druga dla lewej i prawej, trzecia dla dolnej);

 .center {margin: 0em 1.1em 2em;} 

• dla każdej strony można określać wartości naprzemiennie (margines-góra, margines-prawo itd.) lub w jednej linii od góry do lewej zgodnie z ruchem wskazówek zegara;

 .center {margin: 0.5em 1em 1.5em 2em;} 

• wartość elementu marginesu może być taka sama dla każdej strony;

 .center {margin: 1em;} 

• nie można ustawić wartości marginesu;

• wartość marginesu może być ujemna, na przykład w CSS, wierzchołek marginesu z wartością ujemną przesuwa element w górę;

 .center {margin-top: -1em;} 

• wszystkie strony elementu mogą mieć ujemną wartość marginesową, a następnie "zwalnia" przestrzeń dla otaczających elementów od dołu i od prawej strony oraz "uderza" w lewy i górny element;

 .center {margin: -1em;} 

Negatywne wcięcie

Ujemne wcięcia są często używane do zmiany położenia elementu. Gdy używasz ujemnego marginesu, element zwalnia miejsce dla innych podczas ruchu. Elementy, które mają zastosowaną właściwość, mogą przecinać inne elementy lub zezwalać innym elementom na "przejechanie".

 .first {background-color: white;border: 0.06vw solid gold;box-shadow: 0 0 0.09vw gold;width: 50vw;padding: 2vw;margin-bottom: -1vw;margin-left: -9vw;}.second {background-color: black;color: white;font-size: 0.7rem;width: 10vw;padding: 0.5vw;margin-left: 27vw;} 

Za pomocą ujemnego marginesu - lewego i marginesowego - możesz "przesunąć" element w lewo lub w górę. Jeśli w miejscu, w którym element jest przesuwany, znajdują się już obiekty, to nachodzi na nie.

Margines-bottom i margin-right nie wpływają na pozycję elementu, do którego są stosowane, ale dla innych obiektów stają się mniejsze. Dzięki temu na zdjęciu blok z imieniem autora cytatu "wspiął się" na blok z cytatem.

Automatycznie i dziedzicz

Użycie funkcji auto w CSS dla marginesu i wyrównania tekstu z wartością środkową ma podobny efekt. Automatycznie centruje element w poziomie w jednakowej odległości od krawędzi pojemnika.

Przed określeniem wartości auto elementy są ułożone jeden po drugim bez zewnętrznych wcięć (chyba że podano inną wartość marginesu) w taki sam sposób, w jaki są one ustawione z zerowym marginesem. Po określeniu wartości środkowej przesuwa się na środek wiersza.

 .center {margin: auto;} 

Użycie wartości dziedziczenia implikuje dziedziczenie wartości z elementu nadrzędnego. Załóżmy, że element nadrzędny ma wartość w marginesie CSS - po lewej stronie, element środkowy ma wartość określoną w poprzednim przykładzie.

 body {margin-top: 1em;}.center {margin: auto;} 

Element macierzysty, w którym osadzone są wszystkie pozostałe elementy, przesunął się nieco niżej w stosunku do swojej starej pozycji. Jeśli zmienisz wartość marginesu elementu centralnego na dziedziczoną, to centrowanie zniknie w wyniku, a obiekt, który dziedziczy właściwość, zostanie przesunięty w dół w ten sam sposób.

 body {margin-top: 1em;}.center {margin: inherit;} 

Używanie CSS w korpusie Margin może prowadzić do wcięcia. Zwykle ciało ustawia margines na zero, a wypełnienie jest używane, jeśli jest to konieczne, dla wcięć z elementów.

Sąsiadujące przedmioty

Z uwagi na fakt, że wcięcia zewnętrzne nie są w rzeczywistości częścią samego elementu, często nie działają one dokładnie tak, jak można by zakładać pod wpływem innych obiektów. Jednym z przykładów tego efektu jest efekt wcięcia.

Załóżmy, że są dwa elementy, które znajdują się jeden pod drugim, mają zerowe marginesy. Jeśli jeden z nich zostanie dodany do niezerowej wartości marginesu, można zobaczyć, w jaki sposób przesuwa się względem drugiego elementu. Przepisując podobną wartość do drugiego elementu, widzimy, że pojawiają się w nim wcięcia zewnętrzne (przesuwa się na prawo od jego starej pozycji), ale odległość między nimi nie wzrasta, chociaż są one wyrównane wzdłuż linii poziomej.

 .first {background-color: black;border: 0.1vw solid gold;margin: 3vw;width: 10vw;}.second {background-color: black;border: 0.1vw solid darkslateblue;margin: 3vw;width: 10vw;} 

Podobny efekt zostanie zaobserwowany, jeśli ustawisz różne marginesy dla dwóch elementów. Wartość większego marginesu wygrywa, jest to wartość równa odległości między elementami.

 .first {background-color: black;border: 0.1vw solid gold;margin: 3vw;width: 10vw;}.second {background-color: black;border: 0.1vw solid darkslateblue;margin: 5vw;width: 10vw;} 

Zagnieżdżone przedmioty

Margines nie działa poprawnie z zagnieżdżonymi elementami wciętymi. Jeśli górne tiret jest przepisane dla elementów rodzica i dziecka, to tylko jeden z nich zadziała.

 .parent {width: 40vw;height: 20vh;background-color: rgba(214, 254, 255, 0.82);margin-top: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-top: 2vw;} 

Obrazek pokazuje przykłady zachowania elementów i kiedy wartości marginesów elementu nadrzędnego i podrzędnego są różne. Jak widać, jeśli element potomny ma najwyższą wartość marginesu wyższą niż wartość elementu nadrzędnego, wówczas rodzic przesuwa się dokładnie o wartość określoną dla elementu podrzędnego.

 .parent {width: 25vw;height: 20vh;background-color: rgba(214, 254, 255, 0.82);margin-top: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-top: 4vw;} 

Podobny efekt obserwuje się w przypadku zachowania wcięcia, gdy wysokość nadrzędnego elementu auto jest ustawiona na niższe wcięcie elementów rodzica i elementu potomnego. Priorytet większego wcięcia również został zachowany w tym przypadku.

 .parent {width: 25vw;height: auto;background-color: rgba(214, 254, 255, 0.82);margin-bottom: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-bottom: 4vw;} 

Puste przedmioty

Puste elementy zwiną górny i dolny margines. Formalnie będą istnieć, obiekt wzrośnie, ale w rzeczywistości na elementy znajdujące się obok niego wpłynie tylko jedna wartość.

 .first {background-color: black;width: 10vw;}.second_empty {width: 10vw;margin-top: 5vw;margin-bottom: 10vw;}.third {background-color: rgba(199, 90, 175, 0.76);width: 10vw;} 

Wyjątki i zasady

W wielu przypadkach uwzględnienie dodatkowych właściwości elementu pozwala wyeliminować pojawienie się zawalenia. Zniknięcie efektu zawalenia wynika z faktu, że wcięcia obu elementów całkowicie znikają.

Problemy zwijania elementów nadrzędnych i podrzędnych można uniknąć tylko wstawiając coś między nimi, na przykład dodając obramowanie do elementu podrzędnego. Aby nie doszło do zawalenia między sąsiednimi obiektami, lepiej jest określić margines w jednym kierunku.

Niektóre typowe zasady korzystania z depozytu zabezpieczającego:

• lepiej jest pisać wcięcia w jednym kierunku dla wszystkich elementów (prawo i dół);
• kształtowanie odległości między elementami nie powinno odbywać się kosztem elementów podrzędnych;
• wcięcie dziecka w obrębie rodzica od granic rodzica jest przepisywane za pomocą wypełnienia rodzica, a nie marginesu dziecka.

Margines w CSS jest jedną z właściwości elementu, który pozwala kontrolować jego położenie na stronie w stosunku do innych obiektów. Właściwość ma cztery warianty, które umożliwiają zmianę położenia elementu w poziomie i w pionie. Jednym z problemów wykorzystania marginesu jest zapadanie się wcięć (połączenie dwóch wcięć w jeden).