Pytanie Kiedy używać marginesu vs dopełnienia w CSS


Pisząc CSS, czy istnieje konkretna reguła lub wytyczne, które powinny być stosowane przy podejmowaniu decyzji o tym, kiedy użyć margin i kiedy używać padding?


1973
2018-02-03 03:20


pochodzenie




Odpowiedzi:


TL; DR:  Domyślnie używam marginesu 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ą pomiędzy dopełnieniem a marginesem jest to pionowy marginesy automatycznie zwijają się, a dopełnienie nie. Rozważ dwa elementy jeden nad drugim, każdy z wyściółką 1em. To dopełnienie jest uważane za część elementu i jest zawsze zachowane. W efekcie otrzymasz zawartość pierwszego elementu, po nim dopełnienie pierwszego elementu, a następnie dopełnienie drugiego, a następnie zawartość drugiego elementu. Tak więc zawartość dwóch elementów zakończy się na rozbieżnościach 2em.

Teraz zastąp to dopełnienie marginesem 1em. Marginesy są uważane za znajdujące się poza elementem, a marginesy sąsiednich elementów będą się nakładać. Tak więc w tym przykładzie otrzymasz zawartość pierwszego elementu, po którym następuje 1em połączonego marginesu, a następnie zawartość drugiego elementu. Tak więc zawartość dwóch elementów jest oddzielna od siebie.

Może to być naprawdę przydatne, gdy wiesz, że chcesz powiedzieć 1e o odstępie wokół elementu, bez względu na to, który element jest obok.

Pozostałe dwie duże różnice to to, że dopełnienie jest uwzględnione w obszarze kliknięcia i kolorze tła / obrazie, ale nie marginesie.


1217
2018-02-07 20:59



+1 Przy stylizacji typografii i abritary sekwencji akapitów, nagłówków i list prawie zawsze lepiej rozmieścić elementy z marginesami ze względu na sąsiednie zwijanie marginesów. - Pete B
Powinieneś wspomnieć, że tylko pionowe marginesy się zawalą, poziome marginesy nigdy się nie zawalą. Zobacz Specyfikacja CSS 2.1 po więcej szczegółów. - JPelletier
Dlaczego te pionowe marginesy załamują się, podczas gdy poziomy nie? To mogłoby zmylić wiele osób - marcospgp
Marginesy pionowe zwijają się tylko dla elementów bloków. Dla elementów bloku inline marginesy są dodawane zarówno w pionie, jak iw poziomie. Nie jestem więc pewien, czy to jest kwestia, że ​​poziome marginesy nie zapadają się na elementy blokowe, ponieważ i tak wypełniają swój kontener. - Mike
"Domyślnie używam marginesu wszędzie, z wyjątkiem sytuacji, gdy mam ramkę lub tło i chcę zwiększyć przestrzeń wewnątrz tego widocznego pola." - Świetna uwaga, staram się robić to na odwrót i zawsze zmagać się z konsekwencją. - Yannic Welle


Margines jest na zewnątrz elementów bloku, podczas gdy wypełnienie jest wewnątrz.

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

enter image description here


1338
2018-02-03 03:22



jednak poprawną odpowiedzią jest @pavon poniżej. marginesy sąsiednich elementów zachodzą na siebie, a dopełnienie się nie nakłada. ja. e., całkowite oddzielenie jest padding(A) + padding(B) + max(margin(A), margin(B)) - necromancer
Oto dobra praktyka: użyj stałe czerwone obramowanie aby sprawdzić dopełnienie i margines. Czasami mogliśmy zepsuć takie rzeczy <a>, który zawiera tekst, otoczony marginesami i marginesem. Użyj tej sztuczki, aby sprawdzić, ile miejsca możemy kliknąć. - chenghuayang


Najlepsze, co widziałem, tłumacząc to przykładami, schematami, a nawet widokiem "wypróbuj sam" tutaj.

Poniższy diagram daje natychmiastowe wizualne zrozumienie różnicy.

enter image description here

Należy pamiętać o zgodnych ze standardami przeglądarkach (IE dziwactwa jest wyjątkiem) renderuj tylko część zawartości do podanej szerokości, więc śledź to w obliczeniach układu. Zauważ też, że ramka graniczna jest nieco widoczna powrócić z Bootstrap 3 wspierając to.


525
2018-05-04 19:21



w3.org/TR/CSS2/box.html#box-dimensions i zdjęcie z w3 w3.org/TR/CSS2/images/boxdim.png - JP Hellemons


MARGINES vs WYŚCIÓŁKA :

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

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

Proszę zapoznać się z poniższym obrazem pobranym z Margines Vs Padding - Właściwości CSS

Margin vs Padding


77
2018-05-21 07:00



Odwoływanie się do granicy, a nie raczej niejasny margines jest na zewnątrz elementów bloku, podczas gdy wypełnienie jest wewnątrz. poza / wewnątrz czego? Poza tym / wewnątrz sugeruje pozycję statyczną, a nie wpływa na rozmiar elementu zawierającego. Ta odpowiedź wyjaśniła to dla mnie. - nicodemus13


Więcej jest technicznych wyjaśnień na twoje pytanie, ale jeśli szukasz sposobu myśleć o margines i dopełnienie, 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:

  • The okno przeglądarki jest jak ściana.
  • The zadowolony jest jak fotografia.
  • The margines jest jak ściana między oprawionymi obrazami.
  • The wyściółka jest jak mata dookoła zdjęcia.
  • The granica jest jak obramowanie na ramie.

Decydując o marginesie i dopełnieniu, jest to dobra zasada do użycia margines kiedy rozstawiasz element w stosunku do innych rzeczy na ścianie, i wyściółka kiedy dostosowujesz wygląd samego elementu. Margines nie zmieni rozmiaru elementu, ale dopełnienie zazwyczaj zwiększy jego rozmiar1.

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


73
2017-12-17 01:10



Właściwie to się nie zgadzam box-sizing: border-box czyniąc "przestrzeń dla treści mniejszej". Oto skrzypce z 2 pudełkami, w których, jeśli trzymałem dopełnienie tego samego i dodałem "Aktywny", to "Dezaktywuj" po najechaniu kursorem, nie miało znaczenia, czy użyłem box-sizing. Nadal rozwijałoby to pudełko. Musiałem maksymalnie wydłużyć dopełnienie do najdłuższego czasu, w którym skrzynka się rozszerzy, a następnie użyć prób i błędów, by wymyślić pasującą kombinację dla innych słów wchodzących do pudełka, które zachowałyby tę samą szerokość dla każdego słowa: jsfiddle.net/navyjax2/ngzqqjah - vapcguy
Hej vapcguy, dziękuję za twój wkład. Moje stwierdzenie jest ogólnie prawdziwe, gdy szerokość lub wysokość jest zadeklarowana dla elementu, podczas gdy element o niezadeklarowanych wymiarach nie jest tak naprawdę objęty border-box (widzieć: jsfiddle.net/8yravLmL/1). Udzielę bardziej wyczerpującej odpowiedzi, aby uniknąć nieporozumień. - stvnrynlds


Oto trochę kodu HTML, który pokazuje, w jaki sposób padding i margin wpływa na klikalność i wypełnianie tła. Obiekt otrzymuje kliknięcia do jego wypełnienia, ale kliknięcia na obszarze marginesu obiektu idą do jego obiektu 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>


30
2018-02-09 05:29



możesz uruchomić podobny kod na jsfiddle: jsfiddle.net/fschwiet/y74Nz/3 - Frank Schwieterman


Rzecz o marginesach polega na tym, że nie musisz martwić się o szerokość elementu.

Jak kiedy coś dajesz {padding: 10px;}, musisz zmniejszyć szerokość elementu o 20px zachować "dopasowanie"i nie zakłócać innych elementów wokół niego.

Więc na ogół zaczynam od używania paddingów, aby uzyskać wszystko "packed', a następnie użyj marginesów dla drobnych poprawek.

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


30
2018-02-03 05:35





Margines usuwa obszar wokół elementu (poza obramowaniem), ale wypełnienie usuwa obszar wokół treści (wewnątrz obramowania) elementu.

enter image description here

oznacza to, że twój element nie wie o swoich zewnętrznych marginesach, więc jeśli tworzysz dynamiczne kontrole w sieci, polecam użyć dopełnienia w stosunku do marginesu, jeśli możesz.

zauważ, że czasami musisz użyć marginesu.


27
2017-08-01 11:28





Kiedy używać marginesów i wypełnień

W CSS istnieją dwa sposoby tworzenia przestrzeni wokół elementów: marginesy i dopełnienie. W większości scenariuszy użycia są one funkcjonalnie identyczne, ale tak naprawdę zachowują się w nieco inny sposób. Występują ważne różnice między marginesami i marginesami, które należy wziąć pod uwagę przy wybieraniu elementów, które mają być używane do przenoszenia elementów na stronie. Jednak w tych przypadkach, w których marginesy lub marginesy mogą być wykorzystane do tego samego efektu, duża część decyzji sprowadza się do osobistych preferencji.

Kiedy używać marginesów

  1. Chcesz, aby twoje odstępy pojawiły się poza "polem" utworzonym przez właściwość granicy. Marginesy znajdują się poza granicami, więc używałbyś ich, jeśli chcesz, aby twoja granica pozostawała w jednym miejscu. Może to być przydatne, jeśli masz na przykład pasek boczny z ramką, którą chcesz odsunąć od głównego obszaru zawartości.

  2. Nie chcesz, aby twój kolor tła lub obraz wtargnął w twoją osobistą przestrzeń. Kolory tła i obrazy zatrzymują się na granicy, więc jeśli wolisz trzymać swoje tło z przestrzeni, którą tworzysz, marginesy są właściwością, którą chcesz.

  3. Chcesz zwijane miejsce na górze i na dole elementu. Marginesy górny i dolny zachowują się inaczej niż marginesy boczne w tym, że jeśli dwa marginesy znajdują się jeden na drugim, zwiną się do rozmiaru największego zestawu marginesów. Na przykład, jeśli ustawię akapit tak, aby miał górny margines 20 pikseli i dolny margines 15 pikseli, będę miał tylko 20 pikseli przestrzeni całkowitej między akapitami (dwa marginesy zwiną się jeden w drugim, a największy wygrywa) .

Kiedy używać wypełnienia

  1. Chcesz, aby cała przestrzeń, którą tworzysz, znajdowała się wewnątrz twojej granicy. Wyściółka jest zawarta w twoich granicach, więc jest ona przydatna do odpychania twoich granic od zawartości wewnątrz twojego elementu.

  2. Potrzebujesz koloru / obrazu tła, aby kontynuować pracę w przestrzeni, którą tworzysz. Twoje tło będzie kontynuowane za Twoim obiciem, więc używaj go tylko, jeśli chcesz, aby Twoje tło wyglądało.

  3. Chcesz, aby Twoja górna i dolna przestrzeń zachowywały się bardziej sztywno. Jeśli na przykład ustawisz akapity w dokumencie tak, aby miały dopełnienie 20 pikseli i dopełnienie o 15 pikseli, wtedy w dowolnym momencie, gdy masz dwa akapity z rzędu, będą one miały łącznie 35 pikseli przestrzeni między nimi.


21
2017-09-09 20:00