Wie rücken Sie * jede * Zeile eines Elements <span> ein?

Question

Ich habe folgende HTML Brocken:

<span class='instruction_text'> 
    Line 1<br> 
    Line 2 
</span> 

Und die CSS-Deklaration von instruction_text ist:

.instruction_text { 
    margin-left: 70px; 
    font-style: italic; 
    color: #555; 
} 

Die erste Zeile hat eine 70px Marge wie erwartet, aber die nächste Zeile beginnt ohne Einzug. Wie kann ich ALLE Zeilen eingerückt machen?

Answer 1

Verwenden Sie ein Blockelement. <div> ist standardmäßig auf Blockebene, aber das Hinzufügen des CSS display:block zu Ihrer Klasse instruction_text sollte Sie in die richtige Richtung schicken.

Answer 2

Die Verwendung von BR-Tags innerhalb eines SPAN-Elements ist nicht sehr sinnvoll als SPAN in einem Inline-Element, was bedeutet, dass es für den Fluss einer Textzeile oder anderer Inline-Elemente verwendet werden soll.

Sie sollten wirklich ein Element verwenden, das ein "Block" -Ebenenelement wie DIV oder P ist, z. eine, die mehrere Textzeilen (oder Inline-Elemente) enthalten soll.

Wie Sie bemerkt haben werden, können Sie einen BR-Tag in einem SPAN verwenden und es wird einen Zeilenumbruch verursachen, aber Inline-Elemente spielen nicht gut mit Margen/padding usw.