Kiedy używać marginesu vs wypełniania w CSS [zamknięte]

2355

Czy pisząc CSS, istnieje jakaś konkretna reguła lub wytyczna, która powinna być stosowana przy podejmowaniu decyzji, kiedy margini kiedy użyć padding?

Alex Angas
źródło
Użyj paddingna <a>znacznikach, gdy chcesz zwiększyć obszar do zogniskowania .
Josh Habdas

Odpowiedzi:

1586

TL; DR: Domyślnie używam marginesów wszędzie, z wyjątkiem sytuacji, gdy mam ramkę lub tło i chcę zwiększyć przestrzeń w tym widocznym polu.

Dla mnie największą różnicą między wypełnieniem a marginesem jest to, że pionowe marginesy automatycznie się zwiną, a wypełnienie nie.

Rozważ dwa elementy jeden nad drugim z wypełnieniem 1em. To wypełnienie jest uważane za część elementu i zawsze jest zachowywane.

Tak więc skończysz z zawartością pierwszego elementu, a następnie dopełnieniem pierwszego elementu, a następnie dopełnieniem drugiego elementu, a następnie zawartością drugiego elementu.

W ten sposób zawartość tych dwóch elementów ostatecznie się 2emrozdzieli.

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

Tak więc w tym przykładzie skończysz z treścią pierwszego elementu, a następnie 1empołączonego marginesu, a następnie treścią drugiego elementu. Zatem zawartość tych dwóch elementów jest tylko 1emosobna.

Może to być bardzo przydatne, gdy wiesz, że chcesz powiedzieć 1emo odstępach wokół elementu, niezależnie od tego, który element jest obok.

Dwie pozostałe duże różnice polegają na tym, że wypełnienie jest zawarte w obszarze kliknięcia i kolorze / obrazie tła, ale nie marginesie.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }
<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

czarnych
źródło
51
+1 Podczas stylizacji typografii i abrrycznych sekwencji akapitów, nagłówków i list, prawie zawsze lepiej jest rozmieścić elementy marginesami ze względu na zachowanie zwijania się sąsiednich marginesów.
Pete B,
17
Dlaczego marginesy pionowe zapadają się, a marginesy poziome nie? To może wprowadzić w błąd wielu ludzi
Marcos Pereira,
16
Pionowe marginesy zwinięte są tylko dla elementów blokowych. W przypadku elementów bloku wbudowanego marginesy są dodawane zarówno pionowo, jak i poziomo. Nie jestem więc pewien, czy jest to problem polegający na tym, że poziome marginesy nie zapadają się na elementach bloku, ponieważ i tak wypełniają one swój pojemnik.
Mike
2
„Dlaczego pionowe marginesy zapadają się, podczas gdy marginesy poziome nie?” nie ma mechanizmu łączenia elementów blokowych obok siebie bez użycia elementów pływających - których marginesy i tak nigdy się nie zawalają (nawet w pionie) lub pozycjonowania bezwzględnego, w którym oczywiście nie występuje zawalanie lub blok liniowy, który wykorzystuje inny model, który jest brany pod uwagę inline i treść (spacje, tekst) są znaczące lub inne rzeczy, takie jak tabele, flexbox, kolumny, w których odstęp między kolumnami ma specjalne zachowanie. Krótko mówiąc, nie ma miejsca, w którym można by użyć
zawinięcia
5
Należy również pamiętać, że wypełnienie jest uwzględnione w całkowitej szerokości / wysokości elementu, gdy jest używane, box-sizing: border-box;więc jeśli masz width: 100px; padding-left: 20px;całkowitą szerokość, nadal będzie wynosić 100 pikseli, ale obszar zawartości jest zmniejszony o 20 pikseli, w przeciwieństwie do tego, box-sizing: content-box;gdzie wypełnienie jest oddzielne w obliczaniu szerokości zawartości co sprawia, że ​​Twoja całkowita szerokość wynosi 120 pikseli w polu zawartości;
Jomar Sevillejo,
1494

Margines znajduje się na zewnątrz elementów blokowych, a wypełnienie jest wewnątrz.

  • Użyj marginesu, aby oddzielić blok od rzeczy poza nim
  • Użyj podkładki, aby przesunąć zawartość od krawędzi bloku.

wprowadź opis zdjęcia tutaj

John Boker
źródło
63
jednak poprawna odpowiedź to @pavon poniżej. marginesy sąsiednich elementów zachodzą na siebie, podczas gdy wypełnienie nie zachodzi na siebie. tzn. całkowite rozdzielenie topadding(A) + padding(B) + max(margin(A), margin(B))
nekromanta,
9
Oto dobra praktyka: użyj jednolitej czerwonej ramki, aby sprawdzić wypełnienie i margines. Czasami mogliśmy zepsuć takie rzeczy <a>, które zawierają tekst, otoczony dopełnieniem i marginesem. Użyj tej sztuczki, aby sprawdzić, ile miejsca możemy kliknąć.
p3nchan
588

Najlepsze, co widziałem, tłumacząc to przykładami, schematami, a nawet widokiem „spróbuj sam” jest tutaj .

Poniższy schemat wydaje mi się natychmiastowym wizualnym zrozumieniem różnicy.

wprowadź opis zdjęcia tutaj

Jedną z rzeczy, o których należy pamiętać, są przeglądarki zgodne ze standardami ( wyjątki IE to wyjątek ) renderujące tylko część zawartości na podaną szerokość, więc miej to na uwadze w obliczeniach układu. Zauważ też, że ramka jest nieco powracająca z obsługą Bootstrap 3 .

Scott
źródło
91

Istnieje więcej technicznych wyjaśnień dla twojego pytania, ale jeśli szukasz sposobu, aby pomyśleć o marginesie i wypełnieniu, które pomogą Ci wybrać, kiedy i jak z nich korzystać, może to pomóc.

Porównaj elementy bloków ze zdjęciami wiszącymi na ścianie:

  • Okno przeglądarki jest jak ściana.
  • Treść jest tak jak na zdjęciu.
  • Margines jest jak miejsca na ścianie pomiędzy oprawione zdjęcia.
  • Wyściółka jest jak maty wokół fotografii.
  • Granica jest jak granicy na ramie.

Przy podejmowaniu decyzji między marginesem a wypełnieniem, dobrą zasadą jest stosowanie marginesu, gdy odstępujesz element w stosunku do innych rzeczy na ścianie, i wypełnianie, gdy dostosowujesz wygląd samego elementu. Margines nie zmieni rozmiaru elementu, ale wypełnienie zwykle powoduje, że element będzie większy 1 .

1 Ten domyślny model skrzynki można zmienić za pomocą box-sizingatrybutu .

stvnrynlds
źródło
Właściwie nie zgadzam się na box-sizing: border-box„zmniejszenie przestrzeni dla treści”. Oto skrzypce z 2 skrzynkami, w których jeśli nadal to samo wypełniałem i dodałem „Aktywny”, a następnie „Dezaktywuj” po najechaniu myszą, nie miało to znaczenia, czy użyłem box-sizing. Nadal rozszerzyłoby to pole. Musiałem maksymalnie zwiększyć dopełnienie do najdłuższego pola, do którego rozwinąłoby się pole, a następnie użyć metody prób i błędów, aby wymyślić pasującą kombinację dla innych słów wchodzących w pole, które zachowałyby tę samą szerokość dla każdego słowa: jsfiddle.net / navyjax2 / ngzqqjah
vapcguy
3
Hej vapcguy, dziękuję za twój wkład. Moje stwierdzenie jest na ogół prawdziwe, gdy dla elementu deklarowana jest szerokość lub wysokość, podczas gdy na element o niezadeklarowanych wymiarach tak naprawdę nie ma wpływu border-box(patrz: jsfiddle.net/8yravLmL/1 ). Ulepszę moją odpowiedź, aby uniknąć zamieszania.
stvnrynlds
86

MARGIN vs PADDING :

  1. Margines jest używany w elemencie do tworzenia odległości między tym elementem a innymi elementami strony. Gdzie stosowane jest wypełnienie, aby utworzyć odległość między zawartością a ramką elementu.

  2. Margines nie jest częścią elementu, w którym wypełnienie jest częścią elementu.

Proszę odnieść się do poniższego obrazu wyodrębnionego z Margin Vs Padding - CSS Properties

Margines vs Padding

Touhid Rahman
źródło
Odwoływanie się do granicy zamiast raczej niejasnego „Margines znajduje się na zewnątrz elementów blokowych, podczas gdy wypełnienie jest wewnątrz”. na zewnątrz / w środku czego? A na zewnątrz / wewnątrz sugeruje pozycję statyczną, a nie to, że wpływa na wielkość elementu zawierającego. Ta odpowiedź wyjaśniła mi to.
nicodemus13
51

Od https://www.w3schools.com/css/css_boxmodel.asp

Objaśnienie różnych części:

  • Treść - zawartość pola, w którym pojawia się tekst i obrazy

  • Wypełnienie - czyści obszar wokół zawartości. Wypełnienie jest przezroczyste

  • Obramowanie - obramowanie otaczające dopełnienie i treść

  • Margines - Czyści obszar poza granicą. Margines jest przezroczysty

Ilustracja modelu pudełka CSS

Przykład na żywo (baw się, zmieniając wartości): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Pulkit Anchalia
źródło
1
Dzięki. Obraz jest wart tysiąca słów!
Catbuilts,
33

Oto niektóre HTML, który pokazuje, jak paddingi marginwpływać Clickability i tła nadzienie. Obiekt otrzymuje kliknięcia do wypełnienia, ale kliknięcia obszaru marginesu obiektu przechodzą do jego elementu nadrzędnego.

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});
.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}
<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

Frank Schwieterman
źródło
1
możesz uruchomić podobny kod na jsfiddle: jsfiddle.net/fschwiet/y74Nz/3
Frank Schwieterman
31

Marginesy polegają na tym, że nie musisz martwić się o szerokość elementu.

Na przykład, gdy coś dajesz {padding: 10px;}, musisz zmniejszyć szerokość elementu o 20 pikseli, aby zachować dopasowanie i nie przeszkadzać innym elementom wokół niego.

Zasadniczo zaczynam od wypełnień, aby uzyskać wszystko ' packed', a następnie używam marginesów do drobnych poprawek.

Inną rzeczą, o której należy pamiętać, jest to, że wypełnienia są bardziej spójne w różnych przeglądarkach, a IE nie traktuje dobrze ujemnych marginesów.

pixeltocode
źródło
27

Margines czyści obszar wokół elementu (poza ramką), ale wypełnienie usuwa obszar wokół zawartości (wewnątrz granicy) elementu.

wprowadź opis zdjęcia tutaj

oznacza to, że Twój element nie wie o swoich zewnętrznych marginesach, więc jeśli tworzysz dynamiczne kontrolki internetowe, zalecamy stosowanie dopełniania vs marginesu, jeśli możesz.

pamiętaj, że czasami musisz użyć marginesu.

Mohammad Golahi
źródło
22

Dobrze jest znać różnice między margini padding. Oto kilka różnic:

  • Margines jest przestrzenią zewnętrzną elementu, a wypełnienie jest przestrzenią wewnętrzną elementu.

  • Margines to przestrzeń poza granicą elementu, a wypełnienie to przestrzeń wewnątrz jego granicy.

  • Margines akceptuje wartość auto:, margin: autoale nie można ustawić dopełniania na auto.

  • Margines można ustawić na dowolną liczbę, ale wypełnienie musi być nieujemne.

  • Podczas stylizowania elementu będzie to również miało wpływ na wypełnienie (np. Kolor tła), ale nie na margines.

MAChitgarha
źródło
18

Jedną z rzeczy, na które należy zwrócić uwagę, jest to, że denerwują Cię automatyczne zawijanie marginesów (a nie używasz kolorów tła na elementach), co jest po prostu łatwiejsze w użyciu wypełnienia.

alex
źródło
15

Zaawansowany margines kontra objaśnienie

Nie można używać paddingdo umieszczania zawartości w elemencie; Państwo musi wykorzystać marginna elemencie dziecka zamiast. Starsze przeglądarki, takie jak Internet Explorer, źle zinterpretowały model pudełkowy, z wyjątkiem sytuacji, gdy chodzi o użycie, marginktóre działa idealnie w Internet Explorerze 4 .

Istnieją dwa wyjątki, gdy użycie padding jest odpowiednie do użycia:

  1. Jest stosowany do elementu wbudowanego, który nie może zawierać żadnych elementów potomnych, takich jak element wejściowy.

  2. Rekompensujesz za bardzo różnorodny błąd przeglądarki, którego sprzedawca * kaszel * Mozilla * kaszel * odmawia naprawy i jest pewien (do tego stopnia, że ​​regularnie przeprowadzasz wymiany z edytorami W3C i WHATWG), że musisz mieć działające rozwiązanie i to rozwiązanie nie wpłynie na styl niczego innego niż błąd, który kompensujesz.

Gdy masz przy sobie element o szerokości 100% padding: 50px;, skutecznie zdobądź width: calc(100% + 100px);. Ponieważ niemargin jest do niego dodany , nie spowoduje nieoczekiwanych problemów z układem, gdy użyjesz go zamiast bezpośrednio na elemencie.widthmarginchild elementspadding

Więc jeśli nie robisz jednej z tych dwóch rzeczy, nie dodawaj dopełnienia do elementu, ale do jego bezpośrednich elementów potomnych, aby upewnić się, że uzyskasz oczekiwane zachowanie we wszystkich przeglądarkach.

Jan
źródło
Ciekawy! Czy masz link do tego błędu dostawcy?
Alex Angas
1
@AlexAngas Hope Wikipedia działa dla Ciebie? en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
Jan
14

Najpierw spójrzmy na różnice i na czym polega każda odpowiedzialność:

1) Margines

Właściwości marginesu CSS są używane do generowania przestrzeni wokół elementów.
Właściwości marginesu określają rozmiar białej przestrzeni poza ramką. Dzięki CSS masz pełną kontrolę nad marżami.
Istnieją właściwości CSS do ustawiania marginesu dla każdej strony elementu (góra, prawo, dół i lewa strona).


2) Wypełnianie

Właściwości dopełniania CSS są używane do generowania przestrzeni wokół zawartości.
Wypełnienie usuwa obszar wokół zawartości (wewnątrz obramowania) elementu.
Dzięki CSS masz pełną kontrolę nad wypełnieniem. Istnieją właściwości CSS do ustawiania wypełnienia dla każdej strony elementu (góra, prawo, dół i lewa strona).

Marginesy to po prostu spacja wokół elementów, a wypełnienie to spacja wokół treści, które są częścią elementu.

Margines i wypełnienie

Ten obraz z kodemancerów pokazuje, jak margines i obramowania łączą się ze sobą, i jak ramki obramowania i pole zawartości różnią się.

Ponadto definiują każdą sekcję jak poniżej:

  • Treść - określa obszar zawartości pola, w którym znajdują się rzeczywiste treści, takie jak tekst, obrazy lub inne elementy.
  • Wypełnienie - usuwa główną zawartość z pudełka zawierającego.
  • Obramowanie - dotyczy zarówno zawartości, jak i wypełnienia.
  • Margines - ten obszar określa przezroczystą przestrzeń, która oddziela go od innych elementów.
Alireza
źródło
Ta odpowiedź została skopiowana i wklejona z innego miejsca. Zawarty link od „twórców kodów” nie ma nic wspólnego z odpowiedzią.
Alex Angas
2
Alex, zdjęcie i część odpowiedzi, która została wyróżniona, pochodzą od twórców kodu, upewnij się o tym, zanim dodasz komentarz i zagłosujesz
Alireza
8

Zawsze stosuję tę zasadę:

obraz modelu pudełka

Jest to model pudełkowy z funkcji sprawdzania elementu w przeglądarce Firefox. Działa jak cebula:

  • Twoja treść jest w środku.
  • Wypełnienie to odstęp między zawartością a krawędzią znacznika, w którym się znajduje.
  • Granica i jej specyfikacje
  • Margines to przestrzeń wokół znacznika.

Większe marginesy pozwolą uzyskać więcej miejsca wokół pudełka zawierającego treści.

Większe wypełnienie zwiększy przestrzeń między treścią a pudełkiem, w którym się znajduje.

Żadne z nich nie zwiększy ani nie zmniejszy rozmiaru pudełka, jeśli jest ustawione na określoną wartość.

Bjamse
źródło
6

Margines

Margines jest zwykle używany do utworzenia odstępu między samym elementem a jego otoczeniem.

na przykład używam go, gdy buduję pasek nawigacyjny, aby przylegał do krawędzi ekranu i nie powodował białej przerwy.

Wyściółka

Zwykle używam, gdy mam element wewnątrz granicy, <div> lub coś podobnego i chcę zmniejszyć jego rozmiar, ale jednocześnie chcę zachować odległość lub margines między innymi elementami wokół niego.

Krótko mówiąc, jest sytuacyjny; zależy to od tego, co próbujesz zrobić.

Mostafa Osama
źródło
1

Margines znajduje się poza pudełkiem, a wypełnienie jest wewnątrz pudełka

saurabhgoyal795
źródło
To nie odpowiada na pytanie.
TylerH,
@TylerH zapytał tylko o to ??? (kiedy używać marginesu, a kiedy stosować padding?)
saurabhgoyal795
Tak, właśnie o to zapytał. Jak to odpowiedzieć, kiedy użyć każdego z nich?
TylerH,