Ustawia wartość marginesów wokół zawartości elementu. Margines to odległość od wewnętrznej krawędzi ramki elementu do wyimaginowanego prostokąta, który ogranicza jego zawartość (rysunek 1).

Ryż. 1. Margines po lewej stronie tekstu

Właściwość padding umożliwia ustawienie wartości dopełnienia dla wszystkich stron elementu jednocześnie lub zdefiniowanie dopełnienia tylko dla określonych stron.

krótka informacja

Składnia

wypełnienie: [<размер> | <проценты>] {1, 4}

Notacja

	Opis	Przykład
<тип>	Określa typ wartości.	<размер>
A&&B	Wartości muszą być wyprowadzane w określonej kolejności.	<размер> && <цвет>
| B	Wskazuje, że należy wybrać tylko jedną z sugerowanych wartości (A lub B).	normalny | kapitaliki
|| B	Każda wartość może być używana samodzielnie lub w połączeniu z innymi w dowolnej kolejności.	szerokość || liczyć
	Grupuje wartości.	[ przytnij || krzyż]
*	Powtórz zero lub więcej razy.	[,<время>]*
+	Powtórz raz lub więcej razy.	<число>+
?	Podany typ, słowo lub grupa są opcjonalne.	wstawka?
(A, B)	Powtórz co najmniej A, ale nie więcej niż B razy.	<радиус>{1,4}
#	Powtórz raz lub więcej razy oddzielone przecinkami.	<время>#

Wartości

Dozwolone jest użycie jednej, dwóch, trzech lub czterech wartości, oddzielając je spacją. Efekt zależy od ilości wartości i podano w tabeli. jeden.

Marginesy można określić w pikselach (px), procentach (%) lub innych jednostkach zgodnych z CSS. Określając margines jako procent, wartość jest obliczana na podstawie szerokości rodzica elementu.

Piaskownica

Kubuś Puchatek zawsze nie miał nic przeciwko odrobinie orzeźwienia, zwłaszcza o jedenastej rano, bo w tym czasie śniadanie już dawno się skończyło, a obiad nawet nie pomyślał o rozpoczęciu. I, oczywiście, strasznie się ucieszył, widząc, że Królik wyjął kubki i talerze.

div ( tło: #e4efc7; dopełnienie: (( plac zabaw ))px ; )

Przykład

Konduktometria delikatnie przekazuje droga elektroniczna uzyskiwanie, niezależnie od konsekwencji wnikania metylokarbiolu do środka.

Wynik tego przykładu pokazano na ryc. 2.

Ryż. 2. Stosowanie właściwości dopełnienia

Model obiektowy

Obiekt.styl.wypełnienie

Specyfikacja

Każda specyfikacja przechodzi kilka etapów akceptacji.

• Rekomendacja (rekomendacja) - specyfikacja jest zatwierdzona przez W3C i rekomendowana jako standard.
• Rekomendacja kandydata ( Możliwe zalecenie) - grupa odpowiedzialna za standard jest przekonana, że ​​spełnia swoje cele, ale do wdrożenia standardu wymagane jest wsparcie społeczności deweloperskiej.
• Proponowane zalecenie ( Sugerowana rekomendacja) - na tym etapie dokument jest przekazywany do Rady Doradczej W3C do ostatecznego zatwierdzenia.
• Roboczy projekt — bardziej dojrzały projekt po dyskusji i poprawkach do przeglądu społeczności.
• Wersja robocza redaktora ( Wersja redakcyjna) jest wersją roboczą normy po wprowadzeniu zmian przez redaktorów projektu.
• projekt ( Projekt specyfikacji) to pierwsza wersja robocza normy.

Przeglądarki

Przeglądarki

W tabeli przeglądarki zastosowano następującą notację.

Opis

Ustawia wartość marginesów wokół zawartości elementu. Margines to odległość od wewnętrznej krawędzi ramki elementu do wyimaginowanego prostokąta, który ogranicza jego zawartość (rysunek 1).

Właściwość padding umożliwia ustawienie wartości dopełnienia dla wszystkich stron elementu jednocześnie lub zdefiniowanie go tylko dla określonych stron.

Składnia

dopełnienie: [wartość | procent] (1, 4) | dziedziczyć

Wartości

Dozwolone jest użycie jednej, dwóch, trzech lub czterech wartości, oddzielając je spacją. Efekt zależy od ilości wartości i podano w tabeli. jeden.

Marginesy można określić w pikselach (px), procentach (%) lub innych jednostkach zgodnych z CSS. Wartość inherit wskazuje, że jest dziedziczona po rodzicu. Określając margines jako procent, wartość jest obliczana na podstawie szerokości rodzica elementu.

HTML5 CSS2.1 IE Cr Op Sa Fx

Wynik tego przykładu pokazano na ryc. 2.

Ryż. 2. Stosowanie właściwości dopełnienia

Model obiektowy

document.getElementById("identyfikator elementu ").style.padding

Przeglądarki

Internet Explorer do wersji 7.0 nie obsługuje wartości dziedziczenia.

Opis

Ustawia wartość marginesów wokół zawartości elementu. Margines to odległość od wewnętrznej krawędzi ramki elementu do wyimaginowanego prostokąta, który ogranicza jego zawartość (rysunek 1).

Właściwość padding umożliwia ustawienie wartości dopełnienia dla wszystkich stron elementu jednocześnie lub zdefiniowanie go tylko dla określonych stron.

Składnia

dopełnienie: [wartość | procent] (1, 4) | dziedziczyć

Wartości

Dozwolone jest użycie jednej, dwóch, trzech lub czterech wartości, oddzielając je spacją. Efekt zależy od ilości wartości i podano w tabeli. jeden.

Marginesy można określić w pikselach (px), procentach (%) lub innych jednostkach zgodnych z CSS. Wartość inherit wskazuje, że jest dziedziczona po rodzicu. Określając margines jako procent, wartość jest obliczana na podstawie szerokości rodzica elementu.

HTML5 CSS2.1 IE Cr Op Sa Fx

Wynik tego przykładu pokazano na ryc. 2.

Ryż. 2. Stosowanie właściwości dopełnienia

Model obiektowy

document.getElementById("identyfikator elementu ").style.padding

Przeglądarki

Internet Explorer do wersji 7.0 nie obsługuje wartości dziedziczenia.

W poprzednim rozdziale wspomnieliśmy o właściwościach CSS, takich jak margines (pole) i dopełnienie (wcięcie). Teraz przyjrzymy się im bardziej szczegółowo i zastanowimy się, czym się od siebie różnią i jakie mają cechy.

Możesz tworzyć przerwy między elementami na dwa sposoby, ale jeśli dopełnienie jest wcięciem od zawartości do krawędzi bloku, to margines jest odległością między blokami, odstępem między blokami. Zrzut ekranu pokazuje dobry przykład:

Dopełnienie oddziela zawartość od granicy bloku, podczas gdy margines tworzy przerwy między blokami

Jak widać, pola Dopełnienie CSS różnią się od siebie, choć czasami bez patrzenia na kod nie da się określić, która właściwość służy do ustawienia odległości. Dzieje się tak, gdy nie ma ramki ani tła dla bloku treści.

Aby ustawić margines lub dopełnienie w CSS z każdej strony elementu, istnieją następujące właściwości:

Wcięcia:

• górna wyściółka: oznaczający;
• dopełnienie-prawo: oznaczający;
• wyściółka na dole: oznaczający;
• dopełnienie lewe: oznaczający;

Pola:

• górny margines: oznaczający;
• margines prawy: oznaczający;
• marża-dolna: oznaczający;
• margines lewy: oznaczający;

Wartości można określić w dowolnym jednostki CSS- px, em, % itd. Przykład: margin-top: 15px .

Jest też bardzo przydatna rzecz, taka jak Skrót CSS dla marginesu i dopełnienia. Jeśli musisz ustawić marginesy lub dopełnienie dla wszystkich czterech stron elementu, nie jest konieczne pisanie właściwości dla każdej strony osobno. Wszystko jest prostsze: dla marginesu i dopełnienia możesz określić 1, 2, 3 lub 4 wartości naraz. Sposób dystrybucji ustawień zależy od liczby wartości:

• 4 wartości: padding jest ustawiony dla wszystkich boków elementu w następującej kolejności: góra, prawo, dół, lewo: padding: 2px 4px 5px 10px;
• 3 wartości: padding jest ustawiany najpierw dla górnej strony, potem dla lewej i prawej, a następnie dla dołu: padding: 3px 6px 9px;
• 2 wartości: padding ustawiany jest najpierw jednocześnie od góry i dołu, a następnie - jednocześnie dla lewej i prawej strony: padding: 6px 12px;
• 1 wartość: ustaw to samo dopełnienie dla wszystkich stron elementu: dopełnienie: 3px;

Te same zasady dotyczą właściwości marginesu CSS. Pamiętaj, że możesz również użyć wartości ujemnych dla marginesu (na przykład -3px), co czasami może być całkiem przydatne.

zapadający się margines

Wyobraź sobie sytuację: dwa blokowe elementy znajdują się jeden na drugim i mają marginesy. Górny blok jest ustawiony na margines: 60px, a dolny blok jest ustawiony na margines: 30px . Logiczne byłoby założenie, że dwa graniczące ze sobą marginesy dwóch elementów po prostu się stykają, w wyniku czego odstęp między blokami wynosiłby 90 pikseli.

Jednak sprawy mają się inaczej. W rzeczywistości w takiej sytuacji objawia się efekt, który nazywamy zawaleniem, gdy największy rozmiar jest wybierany z dwóch sąsiednich pól elementów. W naszym przykładzie wynikowa przerwa między elementami wyniesie 60 pikseli.

Odległość między blokami jest równa większej z wartości

Marginesy zwinięte działają tylko dla górnych i dolnych marginesów elementów i nie mają zastosowania do marginesów po prawej i lewej stronie. Ostateczna wartość luki jest obliczana w różnych sytuacjach na różne sposoby:

• Gdy obie wartości marginesów są dodatnie, ostateczna wielkość marginesu będzie wartością większą.
• Jeśli jedna z wartości jest ujemna, do obliczenia rozmiaru pola należy uzyskać sumę wartości. Na przykład przy wartościach 20px i -18px rozmiar pola będzie wynosił:
  20 + (-18) = 20 - 18 = 2 piksele.
• Jeśli obie wartości są ujemne, porównuje się moduł tych liczb i wybiera się liczbę, która jest większa w module (stąd mniejsza z liczb ujemnych). Przykład: chcesz porównać wartości pól -6px i -8px . Moduły porównywanych liczb to odpowiednio 6 i 8. Wynika z tego, że 6-8. Ostateczny rozmiar pola to -8 pikseli.
• Jeśli wartości są w różne jednostki CSS, są one redukowane do jednego, po czym są porównywane i wybierana jest większa wartość.
• Jeszcze ciekawszy jest rozmiar marginesu dla elementów potomnych: jeśli dziecko ma większy margines niż rodzic, to ma ono pierwszeństwo. W takim przypadku rozmiar górnego i dolnego marginesu rodzica będzie taki sam, jak ustawiony w dziecku. W takim przypadku nie będzie odległości między rodzicem a dzieckiem.

Dzisiaj będziemy pracować nad zrozumieniem różnicy między dopełnieniem HTML ( wyściółka) i margin (zewnętrzny margines) w CSS . Ale najpierw spójrzmy na ich składnię. Istnieje kilka sposobów na zapisanie tych właściwości: zwykłe i skrócone:

Dopełnienie i margines CSS

Zwykła forma zapisu właściwości, o których mowa, jest łatwiejsza do zrozumienia, ponieważ jest podobna do wszystkich innych notacji stylów:

Wpis zwykły:

wyściółka: 10px; dopełnienie-prawo: 20px; dopełnienie-dolne: 10px dopełnienie lewe: 20px

Z drugiej strony, notacja skrócona w CSS łączy wszystkie te właściwości w jedną wspólną właściwość „dopełnienie”.

Krótki wpis:

padding: 10px 20px 40px 10px;

Dopełnienie i margines mają cztery wartości: górną, prawą, dolną i lewą. Przedstawiony powyżej skrót określa również cztery wartości, oddzielone od siebie spacją. Pierwsza z czterech wartości to dopełnienie górne, następnie dopełnienie prawe, dolne (padding dolny HTML ) i lewe dopełnienie:

wyściółka: GÓRA PRAWA DÓŁ LEWA; (wypełnienie: górny prawy dolny lewy)

Ten wpis można skrócić do trzech wartości, jeśli lewy i prawy dopełnienie/margines są takie same. Na przykład, jeśli górne dopełnienie to 30px , lewe i prawe dopełnienie ma po 10 pikseli, a dolne to 40px , możesz użyć następującej notacji:

padding: 30px 10px 40px;

Sprowadzamy się do dwóch wartości!

Jeżeli dopełnienie/margines górny i dolny są takie same, a dopełnienie/margines prawy i lewy są takie same, to można określić tylko dwie wartości. W tym przykładzie dopełnienie górne i dolne wynosi 10px, a lewe i prawe 20px . Nasz CSS będzie wyglądał tak:

wyściółka: GÓRA/DÓŁ PRAWO/LEWO; (dopełnienie: góra/dół prawy/lewy) dopełnienie: 10px 20px;

Tylko jedna wartość!

Nasz Ostatnia wersja skrót dla dopełnienia i marginesu HTML zawiera tylko jedną wartość. Ta notacja może być używana, gdy wszystkie wcięcia ( góra, dół, prawo i lewo) mają to samo znaczenie. Gdybyśmy chcieli, aby wszystkie strony miały dopełnienie 20px, CSS wyglądałby tak:

Kiedy używać jakiego formatu nagrywania? Na przykład, jeśli chcę nadać elementowi tylko dolną wyściółkę, użyłbym regularne wejście, ponieważ wystarczy zastosować właściwość tylko z jednej strony: padding-bottom: 30px ;

Jak pracować z PADDING i MARGIN

Istnieje znacząca różnica między tymi dwiema właściwościami. Dopełnienie służy do ustawienia miejsca w kontenerze elementu HTML. Margines służy do ustawienia odstępu wokół zewnętrznej granicy elementów.

Wyobraź sobie, że wyściółka wkłada Cię w zimowy płaszcz. Płaszcz jest częścią ciebie, ale gdybym rzucił w ciebie farbą, pokryłby większy obszar niż gdybyś nie miał na sobie tego płaszcza.

Możesz również pomyśleć o wyściółce jako wypychaniu w kartonowym pudełku. Kiedy wypełniasz pudełko styropianem, trzymasz zawartość z dala od krawędzi pudełka. Dopełnienie w CSS robi to samo.

Teraz pomyśl o marginesie jako o niewidzialnym polu siłowym wokół ciebie. Pole siłowe osłania przed tobą inne rzeczy. Wracając do przykładu z płaszczem i farbą, gdybym rzucił w ciebie farbą i byłaby w stanie przejść przez pole siłowe, nadal pokryłaby tylko ciebie i twój płaszcz.

PADDING i MARGIN na przykładzie strony

Rozważ właściwości, używając przykładów z elementami. Zaczniemy od akapitu (tag

), a następnie dodaj do niego kolor tła i dopełnienie 30px z każdej strony.

Poniżej, po lewej stronie, widać, że jest to akapit z dopełnieniem 30 pikseli wokół niego. Na obrazku po prawej użyłem narzędzi Google Chrome aby pokazać, gdzie zaczyna się/kończy dopełnienie HTML dla tego elementu. Zielony kolor na poniższym obrazku to wyściółka umieszczona wokół pojemnika. Ciemnoniebieski kolor tła wypełnia wewnętrzny obszar:

Dodajmy teraz margines do akapitu. Dodam 30px górne i dolne dopełnienie oraz 20px lewy i prawy. Obrazek po lewej poniżej pokazuje, jak ten akapit zmienił się z marginesem . Rzeczywista szerokość obrazu zmniejszyła się, ponieważ margines odsuwa się od granic drugiego element HTML. Po prawej stronie widać, że kolor pomarańczowy to margines wokół elementu. margines jest zawsze poza dopełnieniem, a ciemnoniebieskie tło nie rozciąga się na obszar marginesu:

Jeśli nadal nie wiesz, jak używać dopełnienia i marginesów w HTML , to czas poeksperymentować! Im częściej używasz właściwości CSS i zmieniasz ich wartości, tym lepiej zrozumiesz, jak one działają.

Tłumaczenie artykułu „ WYPEŁNIENIE CSS VS. MARŻA I JAK ICH WYKORZYSTAĆ” został przygotowany przez zaprzyjaźniony zespół projektowy.

Dobry zły

• instruktaż

Celem tego artykułu nie jest komplikowanie prostych rzeczy, ale skupienie się na dobrze znanych standardach, o których z jakiegoś powodu zapomniano. Ważne jest, aby zachować znaczącą strukturę we wszystkich aspektach układu i równie ważne jest przestrzeganie jej we wcięciach. Jedną z głównych zasad układu jest elastyczność. Mianowicie możliwość łatwego wprowadzania jakichkolwiek zmian i nie psucia niczego. Bardzo ważną rolę w tej kwestii odgrywa prawidłowe obchodzenie się z marginesami i dopełnieniem.

Poniższe zasady są realizowane w środowisku pozycjonowania elementów na stronie. W wystroju wykonywane są również elementy. Ale nie tak kategorycznie.

Podstawowe zasady:

1. Wcięcie jest podane jako ostatnie możliwy element w domu.
2. Nie można ustawić wcięć dla elementów niezależnych (blok BEM).
3. W ostatnim elemencie grupy wcięcie jest ustawione na zero (zawsze).

Wcięcia przechodzą od poprzedniego elementu do następnego.

marginesy są ustawiane od poprzedniego elementu do następnego, od pierwszego do drugiego, od góry do dołu, od lewej do prawej.

Oznacza to, że takie właściwości jak Margin-left i margin-top nie są używane(nie bez wyjątków). Z wyściółką jest trochę inaczej (poza tym, że służy do celów dekoracyjnych, powiększania powierzchni łącza itp.). Kiedy blok potrzebuje dopełnienia od góry lub od lewej, pobiera je z dopełnienia u góry i z lewej strony rodzica.

Wcięcia idą w kierunku przepływu domku na drzewie, blok sam się nie pcha.
Początkowo jest w pozycji statycznej i otrzymuje jakiś wpływ kosztem innych.

Wcięcie jest ustawione na ostatni możliwy element w domu

Marginesy są ustawiane tylko między sąsiednimi elementami domku na drzewie.

W przykładzie 3 listy, w następującej strukturze:

• Daleko, daleko poza werbalnością.

Nie kosztem elementów podrzędnych, ale kosztem elementów sąsiednich, tworzone jest wcięcie.

W tej sytuacji .main-section__item jest ostatnim możliwym wcięciem oddzielającym listy. Ten sam efekt można osiągnąć, ustawiając wcięcie na div, list, extra, link, ale nie będzie to poprawne.

Ten przykład jest dość prosty. Ale jeśli wyobrazisz sobie znacznie większe zagnieżdżenie, w którym ktoś zaśmiecał wcięciami, gdy niektóre marginesy się zapadają. a niektóre są podsumowane dopełnieniami.

nagłówek w sekcji siedmiu słów

Jeśli weźmiemy przykład z tytułem i musisz wciąć tytuł od góry. wtedy ostatnim elementem będzie sekcja i ustawione jest dla niej padding-top, marginesy, które są domyślnie zawsze powinny być ustawione na zero.

Najbardziej prosty powód których należy przestrzegać ta zasada, ma to na celu ułatwienie znalezienia wcięcia w przyszłości, zarówno dla Ciebie, jak i dla kogoś, kto będzie w przyszłości pracował z Twoim układem. Tu chodzi o wygodę.

Prawdziwe problemy mogą pojawić się, gdy układy ze słabą strukturą wcięć są renderowane dynamicznie lub powielane.

Dopełnienie nie może być ustawione dla niezależnych elementów (blok BEM)

Nigdy nie wcinaj elementów, których można użyć więcej niż raz. Nawet jeśli nie trzymasz się metodologii, zachowaj perspektywę. Są na to opakowania. Opakowania są dobre. Lub dodatkowe zajęcia.

Jeśli potrzebujesz wciąć blok. Bez uprzedzeń odbywa się to za pomocą:

• Dziedziczenie przez element (jeśli wyciągniesz ten blok z elementu, nie będzie wcięcia i można go po prostu umieścić w innym miejscu).
• Dodanie klasy (możesz uczynić z bloku element).
• Wrapper (jak blok, który pełni rolę, tylko w pozycjonowaniu).

.block__item > .block ( margin-right: 10px; ) .block.block__item ( margin-right: 10px; ) .block-wrap > .block ( margin-right: 10px; )

W ostatnim elemencie grupy wcięcie jest ustawione na zero (zawsze)

Weźmy jako przykład listę i obraz.

To jest menu poziome i logo (które z jakiegoś powodu znajduje się po prawej stronie).

Dla ostatniego li wcięcie jest ustawione na zero. I rekolekcje się skończyły między sąsiednimi elementami ul i img . Co zostało powiedziane w drugiej zasadzie.

Weźmy inny przykład:

...

10.10.10

Interesuje nas wcięcie między wiadomościami, które ustala .blog-preview__item ( margin-bottom: 20px; ) . Ostatni margines jest ustawiony na zero, a dolne dopełnienie odbywa się przez dopełnienie blog-preview . Co zostało powiedziane w drugiej zasadzie.

Częściej niż inne pseudoklasy należy używać :last-child.

Item:not(:last-child) ( margin-bottom: 20px; ) // lub // .item ( // inne style // margin-bottom: 20px; &:last-child ( margin-bottom: 0; ) ) // lub margin-top, główną ideą nie jest tutaj kierunek marginesu, ale przy braku zbędnych // .item + .item ( margin-top: 20px; ) // lub // .item ( // inne style // & + & ( margin-top: 20px; ) )

Wyjątki

Oczywiście zdarzają się przypadki szczególne, nietrywialne zadania i niuanse, w których nie da się przestrzegać tych zasad, ale poza tym warto dążyć do idealnych wcięć, aby układ był jak najczystszy.

PS Polecam przeczytać post

Źródło: margines czy dopełnienie?
Filipa Sporrera.
Tłumaczenie: vl49.

Kiedy lepiej używać marginesów, a kiedy używać dopełnienia do celów formatowania i czy ma to znaczenie?

Bardzo długo walczyłem w poszukiwaniu odpowiednich odpowiedzi. I dopiero po napisaniu mnóstwa okropnego, nieczytelnego kodu CSS, któremu towarzyszyły różne skutki uboczne, mogłem śmiało powiedzieć, że znalazłem fundamentalne, niepodważalne zasady dotyczące wymienionych powyżej kwestii.

Dla jasności przejdźmy do typowej sytuacji, która prawdopodobnie będzie znana każdemu programiście interfejsu użytkownika w 2017 roku. Mamy najprostszy szablon karty.

W tym przykładzie można wyróżnić dwa rodzaje interwałów:

między kartami (niebieski);

między kartami a ich pojemnikiem (zielony);

Bardzo ważne jest, aby zrozumieć tutaj, że mamy do czynienia z dwoma różnymi koncepcjami, które nie powinny być ze sobą powiązane podczas łączenia. Czyli jeśli muszę zmienić odległość między kartami a ich pojemnikiem, na przykład do 24 pikseli, to nie powinno to w żaden sposób wpływać na odstępy między samymi kartami.

Implementujesz przykład z CSS?

Istnieje dosłownie tysiące sposobów na stworzenie takiego szablonu z wykorzystaniem marginesów i dopełnienia, ale chciałbym Wam przedstawić jeden z nich, który demonstruje prawidłowe wykorzystanie właściwości marginesów i dopełnienia. Co więcej, ta metoda umożliwia późniejsze dodawanie innych kart.

Pojemnik(
wypełnienie: 16px
}
.karta + .karta(
margines: 0 0 0 8px;
}

Tylko 2 selektory i 2 zasady.

Jaka jest funkcja znaku plus?

Symbol + reprezentuje sąsiedni selektor. Wskazuje tylko na element bezpośrednio następujący po elemencie określonym przed tym selektorem.

Jak widać na powyższym obrazku, w naszym przypadku ten selektor wybierze każda karta poprzedzona każdą inną kartą. Tak więc za pomocą sąsiedniego selektora możemy ustawić lewy margines dla każdej karty z wyjątkiem pierwszej.

Oznacza to, że mamy możliwość dodania dowolnej liczby kart, których potrzebujemy, odległość między którymi zawsze będzie wynosić osiem pikseli.

Wszystko działa dobrze, dopóki nie musimy umieścić obok kart czegoś innego niż kartę. Cóż, powiedzmy przycisk "Dodaj kartę" ("Dodaj kartę"):

Na podstawie fragmentu kodu CSS, który już mamy, prawdopodobnie nie przypisalibyśmy klasy .card do nowego elementu, który reprezentuje przycisk, ponieważ nie jest to karta. Jak być? Czy warto stworzyć dodatkową klasę name.add-card , która zawiera taką samą regułę z właściwością margin jak class.card ? Nie, jest lepsze rozwiązanie.

Lobotomizowana sowa *+* .

A jak to wygląda. Mimo zabawnego skojarzenia ta metoda działa świetnie i używam jej cały czas, odkąd się o tym dowiedziałam. Więc po co to wszystko? Oto spojrzenie na odpowiedni kod CSS:

Pojemnik(
wypełnienie: 16px
}
/* Czy rozpoznałeś sowę po lobotomii? */
.kontener > * + * (
margines: 0 0 0 8px;
}

Jak zapewne pamiętasz, poprzedni selektor dotyczył każdej karty, która była poprzedzona inną kartą. Teraz z jego pomocą możemy formatować każdy element bezpośrednio poprzedzony dowolnym innym elementem, w tym oczywiście przycisk.

Ostatecznie.

Mam szczerą nadzieję, że przedstawiony tutaj materiał pomógł Ci ustalić, kiedy użyć dopełnienia do oddzielenia treści zawartych w kontenerze, a kiedy użyć marginesów.

Na zakończenie chciałbym przedstawić do rozważenia projekt pióra, który demonstruje powyższe przykłady, a także dwie zasady, które zostały przetestowane przez moje własne doświadczenie. Używamy więc:

wyściółka- dla przestrzeni między pojemnikiem a jego zawartością.

margines- dla przestrzeni między elementami wewnątrz kontenera.

19 odpowiedzi

TL; DR: domyślnie używam pola wszędzie, z wyjątkiem sytuacji, gdy mam obramowanie lub tło i chcę zwiększyć przestrzeń wewnątrz tego widocznego pola.

Dla mnie największą różnicą między dopełnieniem a marginesem jest to, że pionowe marginesy są automatycznie kompresowane, podczas gdy dopełnienie nie.

Rozważ dwa elementy, jeden nad drugim, każdy z wcięciem 1em . Ta wyściółka jest uważana za część elementu i jest zawsze zachowywana.

Otrzymasz więc zawartość pierwszego elementu, następnie dopełnienie pierwszego elementu, potem dopełnienie drugiego, a potem zawartość drugiego elementu.

Tak więc zawartość tych 2 elementów będzie wynosić 2 na 2 elementy.

Teraz zastąp tę wyściółkę marginesem 1 em. Marginesy są uważane za znajdujące się poza elementem, a sąsiednie marginesy elementu będą się nakładać.

Tak więc w tym przykładzie otrzymasz zawartość pierwszego elementu, następnie 1em pola kombi, a następnie zawartość drugiego elementu. Zatem zawartość tych dwóch elementów znajduje się w odległości 1 1em .

Może to być bardzo przydatne, gdy wiesz, że chcesz powiedzieć odstęp 1em między elementami, bez względu na to, obok którego elementu jest.

Pozostałe dwie duże różnice polegają na tym, że dopełnienie jest zawarte w obszarze kliknięcia i kolorze tła/obrazu, ale nie w polu.

Najlepsze, jakie widziałem, wyjaśniając to za pomocą przykładów, diagramów, a nawet „wypróbuj sam”, jest to.

Poniższy wykres daje natychmiastową wizualną reprezentację różnicy.

Należy pamiętać, że przeglądarki zgodne ze standardami (wyjątkiem są dziwactwa IE) renderują tylko część treści do określonej szerokości, więc śledź to w obliczeniach układu. Zauważ też, że w ramie okna widać obsługę Bootstrap 3.

MARGINES przeciw WYŚCIÓŁKA:

Margines jest używany na elemencie do tworzenia odstępów między tym elementem a innymi elementami na stronie. Gdzie dopełnienie służy do tworzenia przestrzeni między treścią a obramowaniem elementu.

Margines nie jest częścią elementu, gdzie dopełnienie jest częścią elementu.

Istnieje więcej technicznych wyjaśnień dla Twojego pytania, ale jeśli szukasz sposobu na zastanowienie się nad marginesem i dopełnieniem, które pomogą Ci wybrać, kiedy i jak ich użyć, może to pomóc.

Porównaj elementy bloku z obrazkami wiszącymi na ścianie:

• Okno przeglądarka wygląda jak ściana.
• zawartość wygląda jak fotografia.
• margines podobny do odstępu między obrazami w ramce.
• dodatek wygląda jak mata wokół zdjęcia.
• Obramowanie jest podobne do obramowania ramki.

Decydując się na kwestię marginesu i dopełnienia, warto posłużyć się praktyczną regułą margines gdy ustawisz element w stosunku do innych rzeczy na ścianie i dodatek. > kiedy się konfigurujesz wygląd zewnętrzny sam element. Margines nie zmieni rozmiaru elementu, ale wypełnienie zwykle sprawi, że element będzie większy niż 1 .

1 Ten domyślny model okna można zmienić za pomocą atrybutu rozmiaru pudełka.

Jeśli chodzi o marginesy, nie musisz martwić się o szerokość elementu.

Tak jak gdy coś dajesz (padding: 10px;) , musisz zmniejszyć szerokość elementu 20px, zapisać " pasować" i nie łamać innych elementów wokół niego.

Dlatego zwykle zaczynam od dopełnienia, aby wszystko „zapakować”, a następnie używam marginesów do drobnych korekt.

Inną rzeczą, o której należy pamiętać, jest to, że wyściółki są bardziej kompatybilne w różne przeglądarki, a IE nie traktuje zbyt dobrze ujemnych marż.

Oto kilka HTML, które pokazują, jak dopełnienie i marginesy wpływają na klikalność i dopełnienie tła. Obiekt otrzymuje kliknięcia na swoim dopełnieniu, ale klika obszar marginesu obiektu, aby przejść do obiektu nadrzędnego.

$(".outer").click(function(e) ( console.log("outer"); e.stopPropagation(); )); $(".inner").click(function(e) ( console.log("inner"); e.stopPropagation(); )); .outer ( padding: 10px; tło: czerwony; ) .inner ( margines: 10px; padding: 10px; tło: niebieski; obramowanie: jednolita biała 1px; )

Marginesy czyszczą obszar wokół elementu (poza obramowaniem), ale dopełnienie czyści obszar wokół zawartości (wewnątrz obramowania) elementu.

oznacza to, że Twój element nie jest świadomy swoich granic zewnętrznych, więc jeśli projektujesz dynamiczne kontrolki internetowe, zalecam używanie dopełnienia i marginesów, jeśli możesz.

zauważ, że kilka razy musisz użyć marginesu.

W CSS istnieją dwa sposoby tworzenia przestrzeni wokół elementów: marginesy i dopełnienie. W większości przypadków są one funkcjonalnie identyczne, ale w rzeczywistości zachowują się nieco inaczej. Istnieją ważne różnice między marginesami a dopełnieniem, które należy wziąć pod uwagę przy wyborze tego, czego użyć do przesuwania elementów po stronie. Jednak w przypadkach, w których można zastosować margines lub dopełnienie, aby uzyskać ten sam efekt, wiele decyzji sprowadza się do osobistych preferencji.

Kiedy używać marginesów?

Chcesz, aby Twoje odstępy pojawiały się poza polem utworzonym przez właściwość border. Marginesy leżą poza granicami, więc używasz ich, jeśli chcesz, aby Twoja granica pozostała w jednym miejscu. Może to być przydatne, jeśli masz na przykład obramowany pasek boczny, który chcesz odsunąć od głównego obszaru zawartości.

Nie chcesz, aby kolor lub obraz tła naruszał Twoją prywatność. Kolory tła i obrazy zatrzymują się na obramowaniu, więc jeśli wolisz trzymać tło poza obszarem, który robisz, marginesy są właściwością, której potrzebujesz.

Chcesz zresetować przestrzeń nad i pod swoim elementem. Marginesy górny i dolny zachowują się inaczej niż marginesy boczne, ponieważ jeśli dwa marginesy są ułożone jeden na drugim, zwijają się do rozmiaru największego zestawu marginesów. Na przykład, jeśli ustawię akapit z górnym marginesem na 20 pikseli i dolnym na 15 pikseli, będę miał tylko 20 pikseli odstępu między akapitami (dwa marginesy rozpadają się jeden na drugim, a największy wygrywa).

Kiedy używać podkładki?

Ta właściwość może mieć od jednej do czterech wartości.

Na obrazku jasnoszary kolor wskazuje obszar, za który odpowiada właściwość dopełnienia:

1. Kiedy określisz cztery wartości(5px 10px 15px 20px ) - kolejność wypełniania będzie następująca: Szczyt(5px ) - Dobrze(10px ) - na dole(15px ) - Lewy(20px). Aby zapamiętać kolejność wcięć w jednej deklaracji, możesz użyć angielskiego słowa TR my BL e(gdzie T-szczyt, R-Prawidłowy, B- na dole, L- lewy).


2. Kiedy określisz trzy znaczenia(5px 10px 15px ) - kolejność wypełniania będzie następująca: Szczyt(5px ) - Prawo lewo(10px ) - na dole(15px ).


3. Kiedy określisz dwie wartości(5px 10px ) - pierwsza wartość (5px ) ustawi rozmiar dopełnienia od góry i dołu zawartości elementu, druga wartość (10px ) ustawi dopełnienie z lewej i prawej strony zawartości elementu.


4. Kiedy określisz jedna wartość(5px ) - dopełnienie ze wszystkich stron będzie tego samego rozmiaru - 5px .

Obsługa przeglądarki

Nieruchomość			Opera		IExplorer	krawędź
wyściółka	1.0	1.0	3.5	1.0	4.0	12.0

Składnia CSS:

dopełnienie: "długość | początkowe | dziedziczenie" ;

Składnia JavaScript:

object.style.padding = "5px"

Wartości nieruchomości

Wersja CSS

CSS1

Dziedziczny

Nie.

Ożywiony

Tak.

Przykład użycia