CSS: Padding vs. Height

Question

Beim Stylen mit CSS habe ich festgestellt, dass die padding -Eigenschaft leicht den gleichen Effekt wie die height -Eigenschaft erreichen kann ... aber die padding -Eigenschaft hält meinen Text schön und zentriert, während die height -Eigenschaft zwingt mich, weitere CSS-Regeln hinzuzufügen/Zeilenhöhe anzupassen.

Ist es "falsch" oder gegen häufig verwendete CSS-Standards, um die height -Eigenschaft zu streichen und Padding stattdessen für die Höhe eines Elements zu verwenden?

Welche Auswirkungen könnte das haben?

Answer 1

Höhe und padding inhärent die Höhe eines Elements steuern. 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 Behältergröße benötigen.

• PRO: nützlich, wenn Sie nicht wollen, der Behälter vertikal zu strecken.
• CON: wird spröde, wie Sie Eigenschaften wie Schriftgröße ändern, margin, padding usw.
  • Zunehmende Größen können dazu führen, Inhalte oder Überlauf zu verbergen.
  • Ändern einer Schriftgröße, kann beispielsweise eine Kaskade Änderung führen (Sie müssen auch die Ränder/padding ändern, oder Größe Eigenschaften von Geschwister/Kind-Elemente.

Verwenden Polsterung, wenn Sie nicht über einen festen Behälterhöhe benötigen, wollen aber Leerzeichen hinzufügen

• PRO. Einfachere Schriftgrößen, Ränder zu ändern, Polsterungen und zusätzliche Inhalte in den Behälter hinzufügen, die incre kann ase die vertikale Größe des Containers.
• CON: Das Hinzufügen von Inhalt/zunehmender Größeneigenschaften führt dazu, dass der Container vertikal gestreckt wird, was in einigen Szenarien unerwünscht ist.
  • Nicht geeignet für Szenarien, in denen der vertikale Platz begrenzt ist oder kontrolliert werden muss.

Verwenden min-max-Höhe und die Höhe für einen Hybrid-Ansatz.

• PRO: Erzwingt eine feste Höhe, sondern ermöglicht es Inhalte dynamisch zu wachsen, bis es, dass min oder max erreicht.
• CON: Sie haben immer noch die "Kaskade" Update-Problem mit Größe Eigenschaften und fügte hinzu, sobald Sie die min oder max.

Answer 2

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

height steuert die tatsächliche Höhe des Elements (im Wesentlichen der Entfernung von border-bottom zu border-top) während padding steuert den Abstand zwischen dem Inhalt und der Grenze.