Definieren der Mindesthöhe der Inline-Elementspanne

Definieren der Mindesthöhe der Inline-Elementspanne

Das Span-Tag wird häufig beim Erstellen von HTML-Webseiten verwendet, aber manche Freunde wissen nicht, wie man dieses Tag richtig einsetzt. Sie denken, es sei einfach zu verwenden, aber die Verwendung ist mühsam, insbesondere wenn sie seine Breite und Höhe definieren müssen.
Ein Freund hat mich einmal gefragt: „ Warum ändern sich Breite und Höhe der Spanne nach der Definition mit CSS immer noch nicht, als wären sie ungültig?“

Tatsächlich ist dieses Problem sehr einfach – zuerst müssen Sie die Eigenschaften von span verstehen, da span ein Inline-Element ist und Inline-Elemente Breite und Höhe ignorieren. Sobald Sie dies verstanden haben, ist die Lösung sehr einfach. Die Lösung besteht darin, CSS zu verwenden, um span in ein Box-Element umzuwandeln.

Es gibt zwei Möglichkeiten, ein Inline-Element als Box-Element zu definieren:

1. Verwenden Sie das Anzeigeattribut „display“ direkt, um es als Boxelement zu definieren.
Anzeige:Block;

2. Verwenden Sie das Float-Attribut, um es automatisch als Box-Element zu definieren.
schweben: links;

<<:  Blog-Design Webdesign-Debüt

>>:  So implementieren Sie https mit Nginx und OpenSSL

Artikel empfehlen

CSS Flex mehrere mehrspaltige Layouts

Grundlegendes dreispaltiges Layout .Container{ An...

MySQL-Kill-Befehl – ​​Verwendungshandbuch

KILL [VERBINDUNG | ABFRAGE] Prozesslisten-ID In M...

Asynchroner Lebenszyklus von AsyncHooks in Node8

Async Hooks ist eine neue Funktion von Node8. Sie...

Überblick über die grundlegenden Bestandteile von HTML-Webseiten

<br />Die Informationen auf Webseiten besteh...

Was tun, wenn Sie Ihr Passwort in MySQL 5.7.17 vergessen?

1. Skip-Grant-Tables zur Datei my.ini hinzufügen ...

Einführung, Installation und Verwendung von Hyper-V (detaillierte Abbildungen)

Vorwort: Als Gigant in der IT-Branche ist Microso...

Detailliertes Tutorial zur Installation von phpMyAdmin unter Ubuntu 18.04

Wir werden phpMyAdmin installieren, damit es mit ...

So verwenden Sie Nginx, um domänenübergreifende Front-End-Probleme zu lösen

Vorwort Bei der Entwicklung statischer Seiten, wi...

So verwalten Sie zwischengespeicherte Seiten in Vue

Inhaltsverzeichnis Problem 1: Zerstörung 1. Wie m...

Dockers flexible Implementierung zum Aufbau einer PHP-Umgebung

Verwenden Sie Docker, um eine flexible Online-PHP...

Konfigurieren Sie die Java-Entwicklungsumgebung in Ubuntu 20.04 LTS

Laden Sie das Java Development Kit jdk herunter D...