CSS: Anzeige Unterschiede

Question

Was ist der Unterschied zwischen Anzeige: Block und Anzeige: Inline

Answer 1

Blockelemente werden normalerweise vertikal gestapelt, während Inline-Elemente horizontal ausgerichtet werden.

Zwei Divs werden übereinander gestapelt, aber wenn Sie sie so einstellen, dass sie inline angezeigt werden, sind sie horizontal nebeneinander. Umgekehrt mit Span-Tags.

Answer 2

Anzeige: Block
bewirkt, dass das Objekt andere Objekte in einem Container in eine neue Zeile versetzt.

Anzeige: Inline
versucht, das Objekt in derselben Zeile wie andere Objekte anzuzeigen.

display: block

 
Item 1 
Item 2 
Item 3 

display: inline

 
Item 1 Item 2 Item 3 

Answer 3

display: block bedeutet, dass das Element als ein Block angezeigt wird, wie Absätze und Header immer gewesen. Ein Block hat oberhalb und unterhalb einige Leerzeichen und toleriert keine HTML-Elemente, außer wenn er anders angeordnet ist (z. B. durch Hinzufügen einer float-Deklaration zu einem anderen Element). display: inline bedeutet, dass das Element inline innerhalb des aktuellen Blocks in derselben Zeile angezeigt wird. Nur wenn es zwischen zwei Blöcken ist, bildet das Element einen "anonymen Block", der jedoch die kleinstmögliche Breite hat.

Answer 4

Block verwendet die gesamte verfügbare Breite mit einer neuen Zeile davor und danach. Inline verwendet nur die benötigte Breite, ohne neue Zeilen zu erzwingen. ja

Answer 5

,

display: block macht das Element wie ein Block zB verhalten: <p>

display: inline machen und Element Layout inline.

Diese können auf Elemente angewendet werden, die standardmäßig den entgegengesetzten Anzeigetyp verwenden.

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. 

* source

Answer 6

Es gibt zwei Haupttypen von Kontext in CSS zeichnen, die Elementen zugeordnet werden können. One, display: block, erstellt positionierbare Boxen. Die andere, display: inline, fließt den Inhalt als eine Reihe von Zeilen innerhalb einer Box.

Standardmäßig nimmt ein Block den gesamten horizontalen Abstand ein, so dass eine Reihe von Blöcken vertikal übereinander angezeigt wird. Wenn Inline-Elemente in Linien fließen, werden sie horizontal als ein Wort nach dem anderen gerendert.

Im Allgemeinen verwenden Sie den Block, um eine Seite auszulegen, während Inline für Textinhalt reserviert ist, den Sie innerhalb von Textstücken finden, zum Beispiel Links.

Es gibt auch andere Arten von Zeichnungskontexten, zum Beispiel display: table, diese werden jedoch aufgrund ihrer speziellen Natur und/oder der fehlenden Browserunterstützung seltener verwendet.

Weitere Details sind in the CSS 2.1 specification verfügbar.

Answer 7

Es ist wichtig zu beachten, dass Inline-Elementen keine eigene Breite, Höhe oder vertikalen Leerraum (Rand/Abstand oben/unten) zugewiesen werden können.

Wenn Sie versuchen, Block-Elemente wie Inline-Elemente verhalten sich zu machen (wo sie nebeneinander stapeln), sollten Sie float werden. Floats werden neben anderen Floats in derselben Richtung gestapelt. Jedes Inline-Element, das float erhält, wird automatisch zu einem Block.

Answer 8

Ein HTML-Dokument wird als ein Fluss betrachtet, denken Sie an einen Stapel von HTML-Elementen, die bis zum Anfang gestapelt sind.

Ein Block wird im Flow als Box definiert (standardmäßig so groß wie die Seite) und so weit wie möglich nach oben geschoben, ohne einen anderen Block zu überlappen. Beispiele: div, p, Tabelle.

Ein Inline-Element definiert keine Box (deshalb können Sie seine Breite und Höhe nicht festlegen), es wird an andere Inline-Elemente im aktuellen Block angehängt. Beispiele: span, Code, a.

Answer 9

display: block 

Das Element nimmt den gesamten Container des übergeordneten Elements auf. Normalerweise beginnt in einer neuen Zeile.

display: inline-block 

Dadurch wird ein Inline-Element erstellt, das nur so viel Platz benötigt wie erforderlich. Kann überall in der Linie beginnen.

Beispielverwendung: Beim Erstellen einer Menüleiste oben auf der Seite (dem Menüelement Wrapper wird häufig display: inline-block zugewiesen)