Was ist der Unterschied zwischen display:block und display:inline
Antworten
Zu viele Anzeigen?
Bryan M.
Punkte
16864
Es ist wichtig zu beachten, dass Inline-Elementen keine eigene Breite, Höhe oder vertikaler Leerraum (margin/padding top/bottom) zugewiesen werden kann.
Wenn Sie versuchen, dass sich Blockelemente wie Inline-Elemente verhalten (wo sie nebeneinander gestapelt werden), sollten Sie float . Floats werden neben anderen Floats in der gleichen Richtung gestapelt. Außerdem wird jedes Inline-Element, das mit float wird automatisch zu einem Block gemacht.
phloopy
Punkte
5574
Vincent Robert
Punkte
34478
Ein HTML-Dokument wird als ein Fluss betrachtet, stellen Sie sich einen Stapel von HTML-Elementen vor, die nach oben gestapelt werden.
Ein Block ist im Fluss als Kasten definiert (standardmäßig so groß wie die Seite) und wird so weit wie möglich nach oben geschoben, ohne einen anderen Block zu überlappen. Beispiele: div, p, table.
Ein Inline-Element definiert keinen Rahmen (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.
Sim13
Punkte
1
display: blockDas Element nimmt den gesamten Container des übergeordneten Elements ein. Normalerweise beginnt es in einer neuen Zeile.
display: inline-blockDadurch wird ein Inline-Element erstellt, das nur so viel Platz wie nötig einnimmt. Es kann an einer beliebigen Stelle in der Zeile beginnen.
Beispiel für die Verwendung: Bei der Erstellung einer Menüleiste am oberen Rand Ihrer Seite (der Wrapper menu-items wird oft mit display: inline-block )
Bonny
Punkte
116
Betrachten Sie das folgende Beispiel: Standardmäßig handelt es sich um ein Block-Level-Element, das den gesamten horizontalen Raum einnimmt. Und sind standardmäßig Inline-Elemente (Das nächste span-Element nimmt horizontal den gleichen Platz in der Zeile ein)
h1{
background-color:yellow;
}
span{
background-color:lightpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h1> This is heading 2</h1>
<span>Span1</span>
<span>Span2</span>
</body>
</html>Um das besser zu verstehen, konvertieren wir ein eingebautes Inline-Element in ein Block-Level-Element und umgekehrt.
h1{
background-color:yellow;
display:inline;
}
span{
background-color:lightpink;
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h1> This is heading 2</h1>
<span>Span1</span>
<span>Span2</span>
</body>
</html>
