CSS, verschachtelte divs & Margen vs. Polsterung

StackOverflow https://stackoverflow.com/questions/1419519

  •  07-07-2019
  •  | 
  •  

Frage

Ich verstehe vollkommen das Box-Modell. Diese Frage ist zu versuchen, in Bezug auf eine semantische Methodik zu, wenn die Margen zu verwenden, und wenn padding zu verwenden.

Hier ist ein typisches Beispiel,

zuerst, in Klartext:

  • Situation: Wir haben ein div-Container haben, in dessen Inneren sich ein Absatzelement ist.

  • Ziel: a. 12px Raum zwischen der Innenseite des div und der Außenseite des Absatzes haben

  • Option a) gelten 12px padding dem Behälter div

  • Option b) gelten 12px Margen auf das Absatzelement

oder, wenn Sie es vorziehen, HTML: 

<div id="container">
    <p>Hello World!</p>
</div>

und CSS:

Option a) 

div#container {padding: 12px;}

Option b) 

p {margin: 12px;}

Cheers!

Jon

War es hilfreich?

Lösung

Ich persönlich ziehe Option A. Warum? Sagen Sie jetzt muss ich andere HTML-Elemente in den div hinzufügen und ich möchte, dass die Polsterung beibehalten werden, würde ich nicht andere Regeln meiner CSS-Dateien hinzufügen müssen, um es zum Laufen zu bringen.

Andere Tipps

Futterstück und Margen geben die gleiche Wirkung, außer in den folgenden Fällen (ich kann einige vermissen):

  1. Sie haben eine Art von Hintergrund-Eigenschaften. Die Margen werden sie nicht bekommen.
  2. Sie haben eine Grenze
  3. Sie verwenden TD (ohne Rand)
  4. Zwei verschachtelte Elemente, Die Ränder sind kollabiert zusammen, wo Polsterungen nicht.
  5. (müssen diese überprüfen) Sie wahrscheinlich anders die Breite und Höhe des Elements beeinflussen. (Wenn jemand besser weiß, pls bearbeiten).

Dies ist ein Fehler in CSS ist, Hier sind einige Beispiele:

http://creexe.zxq.net/div-issue-padding.html = padding Ausgabe

http://creexe.zxq.net/div-issue-margin.html = Marge Ausgabe

die roten und grünen div-Tags in den Beispielen durch die CSS-Eigenschaft TOP erstellt wurden, aber es hat seine eigene Nachteile athat TOP, BOTTOM etc funktioniert nur, wenn die Position des div-Tag Absolute und relative, aber nicht statisch

Es hängt davon ab, was Sie versuchen visuell zu erreichen. Würde container andere Kind-Elemente haben, die auf beiden Seiten des Absatzes über in die Gosse hängen könnte? Wenn ja, macht ein Spielraum mehr Sinn. Aber wenn container eine 12-Pixel-Rinne für alle Elemente, Zeit haben soll, ist es am sinnvollsten die Polsterung verwendet werden, um zu vermeiden Margen Sätze mit mehreren Elementen anzuwenden.

Generell Sie immer die Absätze wollen vertikale Ränder haben, um sicherzustellen, konsistenten Absatz führen.

Persönlich würde ich mit der Option gehe ein von #container {padding: 12px;}, weil es reichlich klar macht, dass alle Kind-Elemente 12px weg von der Grenze dieses div bleiben muss.

Wenn ich andere Elemente will mehr als 12 Pixel entfernt Grenze der von der #container bleiben, dann wende ich so viel mehr Spielraum zu diesem Elemente.

Cheers!

Vertikal-Polsterung auf der Teilung - denn wenn ich habe ich beschlossen, eine unterschiedliche Menge an vertikalem Raum zwischen den mehreren Absätzen wollte ich unteren Rand verwenden würde, und die obere / untere Polsterung des einschließenden Bereichs wird so ziemlich immer bleibt intakt vorausgesetzt Sie haben nur staticly innen positionierte Elemente.

Der Unterschied ist, wo die Grenze liegt.

Die Grenze liegt genau in der Mitte der Margen und Polsterung. Wenn Sie Ränder angeben, dh weißer Raum außerhalb der Grenze.

Wenn Sie Polsterung angeben, dh weißer Raum innerhalb der Grenze (schiebt die Grenze weiter aus dem Elemente)

Können Sie nicht wegen css Strippen zeigen hier, aber versuchen Sie dies aus: 

<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
  i have margins, padding and a border.
</p>

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
  i have margins, and a border.
</p>

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
  i have padding and a border.
</p>
</body>

other stuff!

  • Polsterung bringt Hintergrundfarbe des Elements, die Margen sind grundsätzlich transparent

  • einige Elemente (wie td) scheinen die Margen zu ignorieren, während sie auf Veränderungen in padding

    • antworten
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top