Breite und Höhe: Bestimmen Sie die Größe des Elements. CSS-Breite und -Höhenparameter für die Größe von HTML-Seitenelementen Überschreiben der Blockbreite

Beispiel

Html

CSS

Ergebnis

Zugänglichkeitsbedenken

Stellen Sie sicher, dass mit einer Höhe festgelegte Elemente nicht abgeschnitten werden und / oder andere Inhalte nicht verdecken, wenn die Seite gezoomt wird, um die Textgröße zu erhöhen.

Spezifikationen

Browser-Kompatibilität

Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte https://github.com/mdn/browser-compat-data und senden Sie uns eine Pull-Anfrage.

Aktualisieren Sie die Kompatibilitätsdaten auf GitHub

Legende

Standardmäßig wird die automatische Breite für Blockelemente verwendet. Dies bedeutet, dass das Element horizontal genauso stark gedehnt wird, wie freier Speicherplatz vorhanden ist. Die Standardhöhe von Blockelementen wird automatisch eingestellt, d.h. Der Browser streckt den Inhaltsbereich vertikal, um den gesamten Inhalt anzuzeigen. Um benutzerdefinierte Abmessungen für den Inhaltsbereich eines Elements festzulegen, können Sie die Eigenschaften width und height verwenden.

Mit der Eigenschaft width CSS können Sie die Breite des Inhaltsbereichs des Elements und die Eigenschaft height die Höhe des Inhaltsbereichs festlegen:

Beachten Sie, dass die Eigenschaften width und height nur die Größe des Inhaltsbereichs bestimmen. Um die Gesamtbreite eines Blockelements zu berechnen, fügen Sie die Breite des Inhaltsbereichs, den linken und rechten Abstand sowie die Breite des linken und rechten Randes hinzu. Gleiches gilt für die Gesamthöhe des Elements, nur alle Werte werden vertikal berechnet:

In diesem Absatz werden nur die Breite und Höhe festgelegt.

Dieser Absatz enthält neben Breite und Höhe auch Polsterung, Rand und Polsterung.

Das Beispiel zeigt deutlich, dass das zweite Element mehr Platz beansprucht als das erste. Wenn wir nach unserer Formel berechnen, betragen die Abmessungen des ersten Absatzes 150 x 100 Pixel und die Abmessungen des zweiten Absatzes:

das heißt 180x130 Pixel.

Überlauf von Elementen

Nachdem Sie die Breite und Höhe des Elements definiert haben, sollten Sie einen wichtigen Punkt beachten: Der Inhalt im Element kann die angegebene Blockgröße überschreiten. In diesem Fall geht ein Teil des Inhalts über die Grenzen des Elements hinaus. Um diesen unangenehmen Moment zu vermeiden, können Sie die CSS-Überlaufeigenschaft verwenden. Die Überlaufeigenschaft teilt dem Browser mit, was zu tun ist, wenn der Inhalt des Blocks seine Größe überschreitet. Diese Eigenschaft kann einen von vier Werten annehmen:

• sichtbar ist der vom Browser verwendete Standardwert. Das Festlegen dieses Werts hat den gleichen Effekt wie das Nichteinstellen der Überlaufeigenschaft.
• scroll - Fügt dem Element vertikale und horizontale Bildlaufleisten hinzu.
• auto - Fügt nach Bedarf Bildlaufleisten hinzu.
• versteckt - verbirgt einen Teil des Inhalts, der über die Grenzen des Blockelements hinausgeht.

Die Eigenschaften der CSS-Breite sind für den Wert der Breite des Inhaltsbereichs des Elements verantwortlich.

Breite: Wert | Interesse | auto | erben

Die Eigenschaft css height ist für den Wert der Höhe des Inhaltsbereichs des Elements verantwortlich.

Höhe: Wert | Interesse | auto | erben

Negative Werte für Höhe und Breite sind nicht zulässig.

Es scheint, dass mit diesen CSS-Eigenschaften alles einfach und klar ist, aber tatsächlich stellt sich heraus, dass alles nicht ganz so einfach ist.

Das Festlegen einer Breite für ein Element auf einer Webseite mithilfe der width-Eigenschaft von 500px bedeutet nicht, dass die Gesamtbreite dieses Elements 500 Pixel oder mehr beträgt.

Das Wichtigste, was Sie verstehen müssen, ist, dass die Eigenschaften für Breite und Höhe die Breite und Höhe für den Inhaltsbereich festlegen.

Die Eigenschaften für Breite und Höhe sind nur eine der Komponenten, aus denen die Gesamtbreite und -höhe des Elements berechnet wird. Sie geben die Breite und Höhe des Inhaltsbereichs an, die im folgenden Bild zu sehen sind. Auch Eigenschaften wie Polsterung, Rand und Rand sind an der Bildung der Gesamtbreite und -höhe beteiligt.

Dies kann jetzt leicht gesehen werden.

Nehmen wir zum Beispiel zwei Blöcke mit derselben Breite, aber einer von ihnen legt zusätzlich die Auffüllungseigenschaft fest.

Standardmäßig haben Webseiten das Verhalten, dass der Auffüllwert für die entsprechende Seite zu den Höhen- und Breitenwerten hinzugefügt wird.

Jene. Die Gesamtbreite des Elements besteht aus dem Wert der width-Eigenschaft des Elements, und die Werte für padding-left und padding-right werden hinzugefügt.

Für verschiedene Arten von Elementen, die auf der Seite zu finden sind, wird die Gesamtbreite und -höhe der Elemente mithilfe spezieller Formeln berechnet.

Für verschiedene Arten von Elementen, die auf Webseiten zu finden sind, können die Werte für Breite und Höhe unterschiedliche Verhaltensweisen und Werte haben.

Eine ähnliche Situation wird mit der Eigenschaft height sein.

CSS verfügt über einen speziellen Algorithmus, der die Werte für Breite und Höhe für verschiedene Elemente auf einer Webseite berechnet. Ich werde jetzt nicht auf diesen Algorithmus eingehen, weil es ist etwas kompliziert.

Das Wichtigste, was wir jetzt verstehen müssen, ist, dass wir mit den Eigenschaften für Breite und Höhe mit der Breite und Höhe des Bereichs mit dem Inhalt des Elements arbeiten können und nicht mit der Gesamtbreite und -höhe des Elements.