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

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?

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>

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.

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.

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 .

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 ¹ .

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

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

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

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

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>

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.

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

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.

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.

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.

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.

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.

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.

Zawsze stosuję tę zasadę:

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ść.

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ć.

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