Como você recua * cada * linha do elemento ?

StackOverflow https://stackoverflow.com/questions/2512443

  •  22-09-2019
  •  | 
  •  

Pergunta

Eu tenho o seguinte pedaço HTML:

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

E a declaração CSS de Instrução_text é:

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

A primeira linha tem um 70px margem como esperado, mas a próxima linha começa sem recuo. Como posso fazer todas as linhas recuadas?

Foi útil?

Solução

Use um elemento em nível de bloco. <div> é em nível de bloco por padrão, mas adicionando o CSS display:block para o seu instruction_text A classe deve enviar você na direção certa.

Outras dicas

O uso de tags BR dentro de um elemento de span não faz muito sentido como extensão em um elemento embutido, o que significa que ele deve ser usado no fluxo de uma linha de texto ou outros elementos embutidos.

Você realmente deve estar usando um elemento que é um elemento de nível "bloco" como Div ou P, por exemplo, um projetado para conter várias linhas de texto (ou elementos embutidos).

Como você notou, você pode usar uma etiqueta BR dentro de um período e causará uma quebra de linha, no entanto, os elementos embutidos não jogam bem com margens/preenchimento etc.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top