CSS: Polsterung gegen Höhe

Sowohl die Höhe als auch die Füllung bestimmen inhärent die Höhe eines Elements. Ich würde nicht zustimmen können, dass die Verwendung von Padding falsch ist, sondern eher vom jeweiligen Anwendungsfall abhängt.

Verwenden Sie die Höhe, wenn Sie eine feste Containergröße benötigen.

• PRO: Nützlich, wenn der Container nicht vertikal gestreckt werden soll.
• CON: Wird spröde, wenn Sie Eigenschaften wie Schriftgröße, Rand, Padding usw. ändern.
  • Größere Größen können dazu führen, dass Inhalte sich verstecken oder überlaufen.
  • Wenn Sie beispielsweise eine Schriftgröße ändern, kann dies zu einer Kaskadenänderung führen (Sie müssen auch die Ränder / Abstände oder Größeneigenschaften von gleichgeordneten / untergeordneten Elementen ändern.

Padding verwenden, wenn Sie keine feste Containerhöhe benötigen, aber Leerzeichen hinzufügen möchten.

• PRO : Einfachere Änderung der Schriftgrößen, Ränder und Abstände und Hinzufügen von zusätzlichem Inhalt zum Container, der die vertikale Größe des Containers vergrößern kann.
• CON : Durch das Hinzufügen von Inhalten / zunehmender Größeneigenschaften wird der Container vertikal gestreckt, was in einigen Szenarios unerwünscht ist.
  • Nicht geeignet für Szenarien, in denen der vertikale Platz begrenzt ist oder kontrolliert werden muss.

Verwenden Sie für einen hybriden Ansatz minimale Höhe und maximale Höhe.

• PRO : Erzwingt eine feste Höhe, erlaubt aber, dass der Inhalt dynamisch wächst, bis er den minimalen oder maximalen Wert erreicht.
• CON : Sie haben immer noch das "Kaskaden" -Update-Problem mit den Größeneigenschaften und dem hinzugefügten Inhalt, sobald Sie den Min- oder Max-Wert erreicht haben.

Ja, es ist falsch, Padding zu verwenden, um die Elementhöhe zu steuern.

height steuert die tatsächliche Höhe des Elements (im Prinzip die Entfernung von border-bottom bis border-top ), während padding den Abstand zwischen dem Inhalt und dem Rahmen steuert.