Was ist der Unterschied zwischen display:inline und display:block in CSS?

Blog

Was ist der Unterschied zwischen display:inline und display:block in CSS?

Bildschirmsperre bedeutet, dass das Element als Block dargestellt wird, wie es schon immer Absätze und Überschriften waren. Ein Block hat darüber und darunter einige Leerzeichen und toleriert keine HTML-Elemente daneben, außer wenn anders angeordnet (zum Beispiel durch Hinzufügen einer float-Deklaration zu einem anderen Element).



Anzeige: Inline bedeutet, dass das Element inline innerhalb des aktuellen Blocks in derselben Zeile angezeigt wird. Erst zwischen zwei Blöcken bildet das Element einen „anonymen Block“, der jedoch die kleinstmögliche Breite hat.

Inline-Elemente:



  • respektiere linke und rechte Ränder und Auffüllung, aber nicht oben und unten
  • Breite und Höhe können nicht eingestellt werden
  • lassen Sie andere Elemente links und rechts von ihnen sitzen.

Blockelemente:

  • respektiere all das
  • einen Zeilenumbruch nach dem Blockelement erzwingen
  • erhält volle Breite, wenn Breite nicht definiert

Inline-Blockelemente:



  • lassen Sie andere Elemente links und rechts sitzen
  • respektieren Sie die oberen und unteren Ränder und die Auffüllung
  • Höhe und Breite beachten

Vergleichstabelle:

Was ist der Unterschied zwischen display:inline und display:block in CSS?

#css #css3 #stylesheet