Come si fa il rientro * ogni * riga di un elemento <span>?

Question

Ho il seguente pezzo HTML:

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

e la dichiarazione CSS di instruction_text è:

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

La prima linea ha un margine 70px come previsto, ma la riga successiva inizia senza trattino. Come posso far rientrare TUTTE le linee?

Answer 1

Utilizzare un elemento a livello di blocco. <div> è a livello di blocco per impostazione predefinita, ma l'aggiunta del CSS display:block alla classe instruction_text dovrebbe indirizzarti nella giusta direzione.

Answer 2

L'utilizzo di tag BR all'interno di un elemento SPAN non ha molto senso come SPAN in un elemento in linea, il che significa che deve essere utilizzato nel flusso di una riga di testo o di altri elementi in linea.

Dovresti davvero usare un elemento che è un elemento di livello "blocco" come DIV o P, ad es. uno progettato per contenere più righe di testo (o elementi incorporati).

Come avrete notato, è possibile utilizzare un tag BR all'interno di uno SPAN e sarà causare un'interruzione di linea, tuttavia elementi inline non giocare bene con margini/padding ecc