Blockelemente nehmen per Default so viel Breite ein wie möglich, und so viel Höhe wie nötig. Mit Hilfe von CSS können Breiten und Höhen erzwungen werden, sowohl zum Beschränken als auch zum Strecken. Insgesamt stehen CSS-Eigenschaften für Breite und Höhe (width und height), Mindestbreite und Mindesthöhe (min-width und min-height) sowie Maximalbreite und Maximalhöhe (max-width und max-height) zur Verfügung.
Die CSS-Eigenschaften height und width werden verwendet, um die Höhe und Breite eines Elements festzulegen.
CSS width und height
Die Höhen- und Breiteneigenschaften werden verwendet, um die Höhe und Breite eines Elements festzulegen. Die width CSS Eigenschaft legt die Breite des Inhaltsbereichs eines Elements fest und die Eigenschaft height legt die Höhe fest. Der Inhaltsbereich ist innerhalb des Innenabstands, Rahmens und Außenabstands des Elements.
CSS-Werte für Höhe und Breite
Die Höhen- und Breiteneigenschaften können die folgenden Werte haben:
auto- Dies ist die Standardeinstellung. Der Browser berechnet die Höhe und Breite. Wenn sowohl Höhe als auch Breite auf auto gesetzt werden, bleiben die Dimensionen des Text- oder Bildelements unverändertlength- Definiert die Höhe/Breite in: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).%- Definiert die Höhe/Breite in Prozent des umgebenden Blocksinitial- Setzt die Höhe/Breite auf den StandardwertInherit- Die Höhe/Breite wird von seinem übergeordneten Wert geerbt
“max-width” und „max-height“
Die Eigenschaft max-width/max-height wird verwendet, um die maximale Breite bzw. maximale Höhe eines Elements festzulegen.
Die maximale Breite und maximale Länge kann in Längenwerten wie px, cm usw. oder in Prozent (%) des umgebenden Blocks angegeben oder auf „none“ gesetzt werden (dies ist die Standardeinstellung)
Hinweis: Wenn aus irgendeinem Grund sowohl die Eigenschaft width/height als auch die Eigenschaft max-width/max-heigth für dasselbe Element verwendet wird und der Wert der Eigenschaft width/height größer als die Eigenschaft max-width/max-height ist, wird die Eigenschaft max-width/max-height verwendet (und die Eigenschaft width/height ignoriert).
Die min-width/min-height und max-width/max-height Eigenschaften überschreiben width bzw. height.
Alle CSS-Dimensionseigenschaften
height- Legt die Höhe eines Elements festwidth- Legt die Breite eines Elements festmax-height- Legt die maximale Höhe eines Elements festmax-width- Legt die maximale Breite eines Elements festmin-height- Legt die minimale Höhe eines Elements festmin-width- Legt die minimale Breite eines Elements fest
Haben Sie noch Fragen zu diesem Thema? Oder brauchen Sie Hilfe bei der Gestaltung Ihrer Webseite von einer professionellen Internetagentur aus München? Dann kontaktieren Sie uns gerne!
