Anzeige: Inline vs Anzeige: Block

Was ist der grundlegende Unterschied zwischen dem folgenden CSS:

display:inline

und das:

display:block

Wenn ich diese separat für ein Element verwende, erhalte ich das gleiche Ergebnis.

display: block bedeutet, dass das Element als Block angezeigt wird, wie es Absätze und Überschriften immer waren. Ein Block hat darüber und darunter ein Leerzeichen und toleriert keine HTML-Elemente daneben, sofern nicht anders bestellt (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 liegt, bildet das Element einen 'anonymen Block', der jedoch die kleinstmögliche Breite hat.

Weitere Informationen zu Anzeigeoptionen finden Sie unter: http://www.quirksmode.org/css/display.html

Block

Nimmt die gesamte verfügbare Breite mit einer neuen Zeile vor und nach (Anzeige: Block;)

In der Reihe

Nimmt nur so viel Breite auf, wie es benötigt, und erzwingt keine neuen Linien (Anzeige: Inline;)

display: block - ein Zeilenumbruch vor und nach dem Element

display: inline - kein Zeilenumbruch vor oder nach dem Element

Hier ist eine Vergleichstabelle:

Sie können sehen Beispiele hier.

display: block;Erstellt ein Element auf Blockebene , während display: inline;ein Element auf Inline-Ebene erstellt wird . Es ist etwas schwierig, den Unterschied zu erklären, wenn Sie mit dem CSS-Box-Modell nicht vertraut sind. Es reicht jedoch zu sagen, dass Elemente auf Blockebene den Fluss eines Dokuments unterbrechen, während Inline-Elemente dies nicht tun.

Einige Beispiele von Block - Level - Elemente enthalten: div, h1, p, und hrHTML - Tags.

Einige Beispiele für Inline - Level - Elemente umfassen: a, span, strong, em, b, undi HTML - Tags.

Persönlich stelle ich mir Inline-Elemente gerne als typografische Elemente vor. Dies ist nicht ganz oder technisch korrekt, aber Inline-Elemente verhalten sich größtenteils wie Text.

Sie können eine durch Artikel zum Thema lesen Sie hier . Da es von mehreren anderen Personen in diesem Thread zitiert wurde, ist es möglicherweise eine Lektüre wert.

Bildschirmsperre nimmt die gesamte Zeile ein, dh ohne Zeilenumbruch

Anzeige: Inline benötigt nur genau den Platz, den es benötigt.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

Sie können ein Beispiel in dieser Geige finden http://jsfiddle.net/RJXZM/1/ .

Blockelemente werden erweitert, um ihre übergeordneten Elemente zu füllen.

Inline- Elemente sind gerade so groß, dass sie ihre Kinder aufnehmen können.

Bildschirmsperre

nimmt die gesamte Zeile (100%) des Bildschirms ein, es ist immer 100% der Bildschirmgröße

Beispiel für einen Anzeigeblock

Anzeige: Inline-Block nimmt so viel Breite wie nötig ein, er kann 1% bis 100% der Bildschirmgröße betragen

Beispiel für Inline-Block anzeigen

Deshalb haben wir Div und Span

Das Standard-Styling von Div ist der Anzeigeblock: Es nimmt die gesamte Bildschirmbreite ein

Das Standard-Styling von span lautet display: inline block: span beginnt nicht in einer neuen Zeile und nimmt nur so viel Breite wie nötig ein

Wenn Sie dem Element eine Hintergrundfarbe hinzufügen, sehen Sie den Unterschied zwischen Inline und Block, wie auf den anderen Postern erläutert.

Anzeige: Block Es verhält sich sehr ähnlich wie 'p'-Tags und nimmt die gesamte Zeile ein, und es kann kein Element daneben stehen, bis es schwebt. Anzeige: Inline Es benötigt nur so viel Platz wie erforderlich und ermöglicht die Ausrichtung anderer Elemente neben sich.

Verwenden Sie diese Eigenschaften bei Formularen, um ein besseres Verständnis zu erhalten.

Ein Block oder Inline-Block kann eine Breite haben (z. B. Breite: 400 Pixel), während das Inline-Element nicht von der Breite beeinflusst wird. Das Inline-Element kann bis zur nächsten Textzeile reichen (Beispiel: http://codepen.io/huijing/pen/PNMxXL Ändern Sie die Größe Ihres Browserfensters, um dies zu sehen), während das Blockelement dies nicht kann.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

Blockelemente : Elemente wie div, p, Überschriften sind Blockebene. Sie beginnen mit einer neuen Zeile und belegen die gesamte Breite des übergeordneten Elements. Inline-Elemente : Elemente wie b, i, span, img sind Inline-Level. Sie beginnen nie mit einer neuen Zeile und belegen die Breite des Inhalts.

Standardmäßig erzwingen Inline-Elemente nicht, dass eine neue Zeile im Dokumentfluss beginnt. Blockelemente hingegen verursachen normalerweise einen Zeilenumbruch. Sie können auf diesen Link verweisen