Kiedy używać marginesu vs padding w CSS

Margines znajduje się na zewnątrz elementów blokowych, podczas gdy wyściółka jest wewnątrz.

• Użyj marginesu, aby oddzielić blok od rzeczy spoza niego
• Użyj wyściółki, aby odsunąć zawartość od krawędzi bloku.

Najlepsze, jakie widziałem wyjaśnienie tego za pomocą przykładów, diagramów, a nawet widoku "spróbuj sam" jest tutaj .

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

Należy pamiętać, że przeglądarki zgodne ze standardami (ie quirks jest wyjątkiem) renderują tylko część zawartości do podanej szerokości, więc śledź to w obliczeniach układu. Zauważ również, że ramka widzi nieco comeback with Bootstrap 3 supporting it.

MARGIN vs PADDING :

1. Margines jest używany w elemencie do tworzenia odległości między tym elementem a innymi elementami strony. Gdzie padding służy do tworzenia odległości między zawartością a obramowaniem elementu.

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

Proszę zapoznać się z poniższym obrazkiem wyodrębnionym z Margin Vs Padding-CSS Properties

Istnieje więcej technicznych wyjaśnień na twoje pytanie, ale jeśli szukasz sposobu, aby pomyśleć o marginesie i paddingu, które pomogą Ci wybrać, kiedy i jak ich używać, może to pomóc.

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

• okno przeglądarki jest jak ściana.
• treść jest jak fotografia.
• margines jest jak przestrzeń ściany między ramkami zdjęcia.
• wyściółka jest jak maty wokół zdjęcia.
• obramowanie jest jak obramowanie na ramce.

Przy podejmowaniu decyzji pomiędzy marginesem i wyściółką, warto używaćmargin , gdy odstępujesz element w stosunku do innych rzeczy na ścianie, orazpadding , gdy dostosowujesz wygląd samego elementu. Marginesy nie zmienią rozmiaru elementu, ale padding zazwyczaj sprawi, że element większy¹.

¹ten domyślny model pudełkowy można zmienić za pomocą box-sizing atrybut .

Oto przykład HTML, który pokazuje jak padding i margin wpływają na klikalność i wypełnianie tła. Obiekt otrzymuje kliknięcia do wypełnienia, ale kliknięcia na obszarze marginesu obiektów trafiają do jego rodzica.

$(".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>

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

Tak jak gdy podasz coś {padding: 10px;}, będziesz musiał zmniejszyć szerokość elementu o 20px, aby utrzymać ' dopasowanie' i nie przeszkadzać innym elementom wokół niego.

Więc ogólnie zaczynam od użycia paddings, aby uzyskać wszystko " packed", a następnie używać marginesów dla drobnych poprawek.

Kolejną rzeczą, o której należy pamiętać, jest to, że paddingi są bardziej spójne w różnych przeglądarkach i IE nie traktuje zbyt dobrze ujemnych marginesów.

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

Oznacza to, że twój element nie wie o swoich zewnętrznych marginesach, więc jeśli rozwijasz dynamiczne kontrolki internetowe, zalecam użycie padding vs margin, jeśli możesz.

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

Kiedy używać marginesów i wyściółek

W CSS są dwa sposoby tworzenia przestrzeni wokół twoich elementów: marginesy i padding.In większość scenariuszy użytkowania jest funkcjonalnie identyczna, ale w rzeczywistości zachowują się w nieco inny sposób. Istnieją istotne różnice między marginesami i wyściółkami, które należy wziąć pod uwagę przy wyborze, których użyć do przenoszenia elementów Po stronie. Jednakże w tych przypadkach, w których marginesy lub wyściółki mogą być użyte w tym samym celu, wiele decyzji sprowadza się do osobistych preferencji.

Kiedy stosować marginesy

1. Chcesz, aby odstępy były wyświetlane poza "polem" utworzonym przez właściwość border. Marginesy leżą poza granicami, więc używasz ich, jeśli chcesz, aby granica pozostała w jednym miejscu. Może to być przydatne, jeśli masz na przykład pasek boczny z obramowaniem, które chcesz usunąć z głównego obszaru zawartości.

2. Nie chcesz, aby kolor tła lub obrazek zaatakuj swoją przestrzeń osobistą. Kolory tła i obrazy zatrzymują się na granicy, więc jeśli wolisz trzymać tło z dala od tworzonej przestrzeni, marginesy są właściwością, którą chcesz.

3. Chcesz złożyć miejsce na górze i na dole swojego elementu. Górny i dolny margines zachowują się inaczej niż marginesy boczne, ponieważ jeśli dwa marginesy znajdują się jeden na drugim, zapadają się do wielkości największego zestawu marginesów. Na przykład, jeśli ustawię górny margines akapitu na 20 pikseli i dolny margines 15 pikseli, będę miał tylko 20 pikseli przestrzeni między akapitami (dwa marginesy zapadają się na siebie, a największy wygrywa).

Kiedy stosować wyściółkę

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

2. Potrzebujesz koloru tła / obrazu, aby kontynuuj w przestrzeni, którą tworzysz. Tło będzie kontynuowane za wyściółką, więc używaj go tylko wtedy, gdy chcesz, aby tło było widoczne.

3. Chcesz, aby twoja górna i dolna przestrzeń zachowywała się sztywniej. Na przykład, jeśli akapity w dokumencie mają górne wypełnienie 20 pikseli i dolne wypełnienie 15 pikseli, to za każdym razem, gdy dwa akapity pod rząd będą miały w sumie 35 pikseli odstępu między nimi.

Wyjaśnienie poszczególnych części:

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

Padding-czyści obszar wokół zawartości. Wyściółka jest przezroczysta

Obramowanie-obramowanie, które przebiega wokół obramowania i treści

Margin-czyści obszar poza granicami. Margines jest przezroczysty

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

Należy zwrócić uwagę na to, że automatyczne zwijanie marginesów irytuje cię (a nie używasz kolorów tła na swoich elementach), coś, co jest po prostu łatwiejsze w użyciu padding.

Advanced Margin versus Padding Explain

Nie jest wskazane używanie padding do spacji zawartości w elemencie; musisz używać na elemencie potomnym . Starsze przeglądarki, takie jak Internet Explorer, błędnie interpretowały Model box, z wyjątkiem użycia margin, który działa doskonale w Internet Explorer 4 .

Istnieją dwa wyjątki w przypadku używania padding jest odpowiedni do użycia:

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

2. Rekompensujesz bardzo różny błąd przeglądarki, który sprzedawca *kaszel* Mozilla *kaszel* odmawia naprawienia i jesteś pewien (do tego stopnia, że regularnie wymieniasz się z edytorami W3C i WHATWG), że musisz mieć działające rozwiązanie i to rozwiązanie nie wpłynie na stylizację niczego innego niż błąd, który rekompensujesz za.

Gdy masz element o szerokości 100% z padding: 50px;, otrzymujesz width: calc(100% + 100px);. Ponieważ margin jest , a nie dodane do width, nie spowoduje to nieoczekiwanych problemów z układem, gdy użyjesz margin na child elements zamiast padding bezpośrednio na elemencie.

Więc jeśli Nie} robisz jedną z tych dwóch rzeczy zrób Nie dodaj padding do elementu, ale do jego bezpośredniego elementu(ów) child/children, aby upewnić się, że uzyskasz oczekiwane zachowanie w wszystkie przeglądarki.

Najpierw przyjrzyjmy się jakie są różnice i jaka jest każda odpowiedzialność:

1) margines

Właściwości marginesu CSS służą do generowania przestrzeni wokół elementów.
właściwości margin ustawiają rozmiar białej przestrzeni poza granica. Dzięki CSS masz pełną kontrolę nad marginesami.
są Właściwości CSS do ustawiania marginesu dla każdej strony elementu (Góra, Prawo, Dół i lewo).

2) Padding

Właściwości wypełnienia CSS są używane do generowania przestrzeni wokół zawartości.
wyściółka czyści obszar wokół zawartości (wewnątrz obramowania) element.
dzięki CSS masz pełną kontrolę nad wyściółką. Tam są właściwościami CSS do ustawiania wypełnienia dla każdej strony elementu (Góra, Prawo, Dół i lewo).

Więc po prostu marginesy są przestrzenią wokół elementów, podczas gdy Padding są przestrzenią wokół treści, które są część elementu.

Ten obrazek z codemancers pokazuje, jak marginesy i obramowania się łączą i jak ramka i content-box sprawiają, że jest inna.

Również definiują każdą sekcję Jak poniżej:

• Content - określa obszar zawartości Pola, w którym znajduje się rzeczywista zawartość, taka jak tekst, obrazy lub inne elementy.
• Padding - usuwa główną zawartość z jej zawierające pudełko.
  
• Border - to otacza zarówno zawartość, jak i wypełnienie.
• Margin - obszar ten definiuje przestrzeń przezroczystą, która oddziela ją od innych elementów.

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

• Margines jest przestrzenią zewnętrzną elementu, podczas gdy wypełnienie jest przestrzenią wewnętrzną elementu.
• Margines jest przestrzenią poza obramowaniem elementu, podczas gdy Padding jest przestrzenią wewnątrz jego obramowania.
• Margin akceptuje wartość auto: margin: auto, ale nie można ustawić Padding na auto.
• Margines można ustawić na dowolną liczbę, ale wypełnienie musi być nie-negatywne.
• Gdy stylizujesz element, wpłynie to również na wypełnienie (np. kolor tła), ale nie na margines.

CSS Margin, padding i border są właściwościami modelu pudełkowego.

• margines jest przestrzenią poza treścią.
• Padding to przestrzeń wewnątrz treści.
• obramowanie to widoczny kontur (dowolny kolor, styl i szerokość) poza obramowaniem.

Total width=content-width + padding + border.

Margines

Margines jest zwykle używany do tworzenia przestrzeni między samym elementem a jego otoczeniem.

Na przykład używam go, gdy buduję pasek nawigacyjny, aby przykleił się do krawędzi ekranu i nie miał białej przerwy.

Padding

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

Więc krótko mówiąc, jest to sytuacyjne; to zależy od tego, co próbujesz zrobić.

Zawsze używam tej zasady:

Jest to model pudełkowy z funkcji inspect element w Firefoksie. Działa jak cebula:

• Twoja treść jest pośrodku.
• Padding to przestrzeń między zawartością a krawędzią znacznika, który jest do środka.
• granica i jej specyfikacje
• margines to przestrzeń wokół znacznika.

Więc większe marginesy sprawią, że więcej miejsca wokół pudełka, które zawiera Twoje treść.

Większa wyściółka zwiększy przestrzeń między Twoją zawartością a pudełkiem, w którym jest.

Żaden z nich nie zwiększy ani nie zmniejszy rozmiaru pola, jeśli zostanie ustawione na określoną wartość.

Margines jest poza pudełkiem, a wyściółka jest wewnątrz pudełka