CSS: Unterschiede in den Anzeigeeigenschaften

Question

Was ist der Unterschied zwischen display:block und display:inline

Answer 1

Anzeige: Block
veranlasst das Objekt, andere Objekte innerhalb eines Containers in eine neue Zeile zu zwingen.

Anzeige: inline
versucht, das Objekt in der gleichen Zeile wie andere Objekte anzuzeigen.

Anzeige:Block

Item 1 
Item 2 
Item 3

Anzeige:inline

Item 1 Item 2 Item 3

Answer 2

Blockelemente werden in der Regel vertikal gestapelt, während Inline-Elemente horizontal aufgereiht werden.

Zwei Divs werden übereinander gestapelt, aber wenn Sie sie auf display:inline setzen, werden sie horizontal nebeneinander liegen. Umgekehrt verhält es sich mit Span-Tags.

Answer 3

Ja,

display:block bewirkt, dass sich das Element wie ein Block verhält, z. B: <p>

display:inline machen und Elementlayout inline.

können auf Elemente angewandt werden, die standardmäßig den entgegengesetzten Anzeigetyp aufweisen.

Mögliche Werte

* none - no display at all.
* inline - An inline box.
* block - A block box.
* inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy.
* run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing.
* list-item - the equivalent of the default styling of the HTML li element.
* table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE.
* inline-table - an inline-level table. Not supported by IE.
* table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE.
* table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE.
* table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE.
* table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE.
* table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE.
* table-column - the equivalent of the default styling of the HTML col element. Not supported by IE.
* table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE.
* table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE.

* Quelle

Answer 4

Display: block bedeutet, dass das Element als Block dargestellt wird, so wie es bei Absätzen und Überschriften schon immer der Fall war. Ein Block hat etwas Leerraum über und unter sich und duldet keine HTML-Elemente neben sich, es sei denn, es wird anders angeordnet (z. B. durch Hinzufügen einer float-Deklaration zu einem anderen Element). display: inline bedeutet, dass das Element inline, also innerhalb des aktuellen Blocks auf derselben Zeile, angezeigt wird. Nur wenn es sich zwischen zwei Blöcken befindet, bildet das Element einen "anonymen Block", der jedoch die kleinstmögliche Breite hat.

Answer 5

In CSS gibt es zwei Haupttypen von Zeichnungskontexten, die Elementen zugewiesen werden können. Erstens, display: block erstellt positionierbare Boxen. Das andere, display: inline fließt der Inhalt als eine Reihe von Zeilen innerhalb eines Rahmens.

Standardmäßig nimmt ein Block den gesamten horizontalen Platz ein, so dass eine Reihe von Blöcken untereinander und vertikal gestapelt angezeigt wird. Da Inline-Elemente in Zeilen übergehen, werden sie horizontal, als ein Wort nach dem anderen, dargestellt.

Im Allgemeinen verwenden Sie Block, um eine Seite zu gestalten, während Inline für Textinhalte reserviert ist, die sich innerhalb von Textabschnitten befinden, z. B. für Links.

Es gibt auch andere Arten von Zeichnungskontexten, zum Beispiel, display: table Diese werden jedoch aufgrund ihrer Spezialisierung und/oder mangelnder Browserunterstützung seltener verwendet.

Weitere Einzelheiten finden Sie unter die CSS 2.1-Spezifikation .