Anzeige: Inline vs Anzeige: Block

Antworten:

123

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

Pranay Rana
quelle
1
Gibt es Elemente, die standardmäßig inline sind? Spanne?
Eshellborn
1
<span> <a> und <img>
EKanadily
80

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;)

Rauben
quelle
40

display: block - ein Zeilenumbruch vor und nach dem Element

display: inline - kein Zeilenumbruch vor oder nach dem Element

xj9
quelle
22

Hier ist eine Vergleichstabelle:Geben Sie hier die Bildbeschreibung ein

Sie können sehen Beispiele hier.

Niko Bellic
quelle
13

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.

Damien Wilson
quelle
8

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/ .

Aarthi
quelle
1
Hervorragend ... das, wonach ich suche
Vicky
7

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

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

James Curran
quelle
5

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

Harshit
quelle
Deshalb haben wir Div und Span - dieser ist Awesome bro :-)
Siva
1

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

Janick Bernet
quelle
1

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.

kunal
quelle
0

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;
      }
EKanadily
quelle
Dies liest sich so, als ob es eine Antwort auf eine der anderen acht Antworten auf diese Frage sein soll. Ich kann aber nicht sagen, welche.
Quentin
die meisten von ihnen. nur zur Info hinzufügen.
EKanadily
0

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.

Avinash Malhotra
quelle
0

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

Rohan Devaki
quelle
Vielen Dank für Ihre Antwort. Bitte überprüfen Sie die anderen Antworten beim nächsten Mal zuerst, da dies nichts Neues hinzufügt.
BluE
Sir, ich habe diese Frage aufgrund des Wissens beantwortet, das ich kenne. Warum sollte ich andere Antworten sehen und meine Antwort veröffentlichen? Haben Sie diesen Kommentar an alle gesendet, die dies beantwortet haben? Das ist so peinlich.
Rohan Devaki