Eu tenho um grande parágrafo de texto que é dividido em parágrafos com <br>'s:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

Eu quero aumentar a diferença entre esses parágrafos, como se houvesse dois <br>ou algo assim. Eu sei que a maneira certa de fazer isso é usar <p></p>, mas agora não posso alterar esse layout, então estou procurando uma solução somente CSS.

Eu tentei configuração <br>'s line-heighte heightcom display: block, eu também pesquisei e Stack Overflow-ed brevemente, mas não encontrou qualquer solução. Isso é possível sem alterar o layout?

Css:

br {
   display: block;
   margin: 10px 0;
}

A solução provavelmente não é compatível com vários navegadores, mas é pelo menos algo. Considere também a configuração line-height:

line-height:22px;

Para o Google Chrome, considere a configuração content:

content: " ";

Fora isso, acho que você está preso a uma solução JavaScript.

Aqui está a solução correta que realmente oferece suporte a vários navegadores:

  br {
        line-height: 150%;
     }

Então, as pessoas acima têm basicamente uma resposta semelhante, mas aqui é muito sucinta. Funciona no Opera, Chrome, Safari e Firefox, provavelmente no IE também?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Outra maneira é usar um RH . Mas, e aqui está a parte astuta, torne-o invisível.

Portanto:

<hr style="height:30pt; visibility:hidden;" />

Para fazer uma quebra de BR mais limpa, simulada usando o HR: Btw funciona em todos os navegadores !!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

Tanto quanto sei <br>, não tem altura, apenas força uma quebra de linha. O que você tem é um texto com algumas quebras de linha, além das quebra automática, não parágrafos. Você pode alterar o espaçamento entre linhas, mas isso afetará todas as linhas.

Acabei de ter esse problema e resolvi-o usando

<div style="line-height:150%;">
    <br>
</div>

você pode aplicar a altura da linha nesse <p>elemento, para que as linhas se tornem maiores.

Eu nunca experimentei o pseudoelemento :before/ :afterCSS2 antes, principalmente porque ele é suportado apenas no IE8 (isso diz respeito aos navegadores IE) . Esta poderia ser a única solução possível de CSS:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

Aqui está um exemplo no QuirksMode .

Pensei que você poderia usar:

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

Mas isso não funcionou no chrome ou no firefox.

Só pensei em mencionar isso, caso ocorresse com mais alguém e eu os salvaria.

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

Funciona no Firefox, Chrome e Safari. Não foi testado no Explorer. (O tablet Windows está sem energia.)

Quebras de linha e tamanho da fonte funcionam de maneira diferente no Firefox e Safari.

Curiosamente, se a tag de interrupção for escrita em formato completo da seguinte maneira:

<br></br>

então a altura da linha CSS: 145% funciona. Se a tag de interrupção estiver escrita como:

<br> or 
<br/> 

então não funciona, pelo menos no Chrome, IE e Firefox. Esquisito!

O que funciona para mim é adicionar essa linha entre tags de parágrafo ... embora não seja a melhor solução.

<br style="line-height:32px">

-------- Editar ---------

Eu encontrei problemas com PC / Mac com isso ... Ele fornece ao texto a nova altura da linha, mas não quebra a linha ... Você pode fazer alguns testes por conta própria. Desculpe!

E lembre-se de que (mis) usar a <hr>tag conforme sugerido em algum lugar encerrará a <p>tag; portanto, esqueça a solução.
Se f.ex. algo é estilizado no ambiente <p>, esse estilo desaparece pelo restante do conteúdo após a <hr>inserção.

Aqui está uma solução que funciona no IE, Firefox e Chrome. A idéia é aumentar o tamanho da fonte do elemento br do tamanho do corpo de 14px para 18px e diminuir o elemento em 4px para que o tamanho extra fique abaixo da linha de texto. O resultado é 4px de espaço em branco extra abaixo do br.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

ATUALIZADO 13 de setembro de 2019:

Costumo <br class=big>fazer uma quebra de linha de grandes dimensões, quando preciso. Até hoje, eu denominei assim:

br.big {line-height:190%;vertical-align:top}

(Isso vertical-align:topera necessário apenas para o IE e o Edge.)

Isso funcionou em todos os principais navegadores que tentei: Chrome, Firefox, Opera, Brave, PaleMoon, Edge e IE11.

No entanto, recentemente parou de funcionar em navegadores baseados no Chrome : minhas "grandes" quebras de linha se transformaram em quebras de linha de tamanho normal.

(Não sei exatamente quando eles o quebraram. Em 12 de setembro de 2019, ele ainda funciona no meu Chromium Portable 55.0.2883.11 desatualizado, mas está quebrado no Opera 63.0.3368.71 e no Chrome 76.0.3809.132 (ambos Windows e Android).)

Após algumas tentativas e erros, acabei com o seguinte substituto, que funciona nas versões atuais de todos esses navegadores:

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

Notas:

line-height:190% funciona em tudo, exceto nas versões recentes dos navegadores baseados no Chrome.

vertical-align:topé necessário para o IE e o Edge (em combinação com line-height:190%), para obter o espaço extra após a linha anterior, onde pertence, em vez de parcialmente antes e parcialmente depois.

display:block;content:"";margin-top:0.5em funciona no Chrome, Opera e Firefox, mas não no Edge e no IE.

Uma maneira alternativa (mais simples) de adicionar um pouco de espaço vertical extra após uma <br>tag, se você não se importa em editar o HTML, é com algo assim. Funciona bem em todos os navegadores:

<span style="vertical-align:-37%"> </span><br>

(Você pode, é claro, ajustar "-37%" conforme necessário, para uma lacuna maior ou menor.) Aqui está uma página de demonstração que inclui algumas outras variações sobre o tema:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



28 de maio de 2020:

Eu atualizei a página de demonstração; agora demonstra todas as técnicas acima:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Michael e Yoda estão certos. O que você pode fazer é usar a <p>tag, que, sendo uma tag de bloco, usa uma margem inferior para compensar o bloco a seguir, para que você possa fazer algo semelhante a isso para aumentar o espaçamento:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

Outra alternativa é usar a <hr>tag block , com a qual você pode definir explicitamente a altura do espaçamento.

<br />ocupará tanto espaço quanto sua linha cheia de texto <p>, você não pode mudar isso. Se você deseja maior, significa que deseja separar em parágrafo, então adicione outro <p>. Não se esqueça de ser o mais semântico que puder;)

você também pode usar a propriedade "block-quote" em CSS. Isso faria com que não afetasse suas linhas individuais, mas permite definir parâmetros apenas para as quebras entre parágrafos ou "aspas em bloco".

UPDATE:
Estou corrigido. "blockquote" é na verdade uma propriedade html. Você o usa exatamente como <p> e </ p> em torno do seu trabalho. Você pode então definir os parâmetros para sua cotação em bloco em css como

blockquote { margin-top: 20px }

Espero que isto ajude. É semelhante à configuração dos parâmetros no br e pode ou não ser compatível com vários navegadores.

Você não parece capaz de ajustar a altura de um BR, mas pode fazê-lo desaparecer de forma confiável usando o display: none

Passei por esta página enquanto procurava uma solução para o seguinte:

Eu tenho uma situação em que o gateway de pagamento de terceiros (Worldpay) apenas permite que você personalize suas páginas de pagamento com 10k no máximo de CSS e HTML (nenhum script permitido) que são injetados no corpo do modelo e depois de algumas tags BR, FONT etc. Juntamente com o DTD, que força o IE7 / 8 no modo Quirks, isso torna a personalização entre navegadores o mais difícil possível!

Desativar o BR torna as coisas muito mais consistentes ...

i Use esses métodos, mas não sei se o navegador cruzado

================= Método 1 ==================

br {
    display:none;
}

OU

================= Método 2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

OU

================= Método 3 ==================

br:after { content: "" }
br { content: "" }

Tente usar o line-heightatributo CSS na sua ptag que contém a brtag. Lembre-se de que você pode usar idsuas ptags se quiser isolá-las, embora seja melhor usar um divIMO para isolamento.

Desculpe se alguém já disse isso, mas a solução simples é brincar com a sua "altura da linha". Se você está recebendo muito espaço ao usar uma quebra de linha, é simplesmente porque a altura da sua linha está muito alta. Você pode corrigir isso no CSS (mas saiba que isso afetará tudo o que usa essa propriedade) ou pode fazer um estilo embutido para substituir o CSS.

Eu tive que desenvolver uma solução para converter HTML em PDF e centralizar verticalmente o texto nas células da tabela, mas nada funcionou, exceto inserir a planície <br>

Então, pensando fora da caixa, mudei o tamanho vertical ajustando o tamanho da fonte (em pt).

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

Você precisaria fazer isso em linha e em cada
elemento, mas ele deve funcionar na maioria dos navegadores. Use a altura da linha para obter o efeito desejado. Se você o alinhar em cada elemento, ele deve funcionar na maioria dos navegadores e e-mail (mas isso é muito complexo para discutir aqui).

Isso funcionou para mim quando não consegui que o espaçamento de estilos funcionasse na tag span:

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

Usar <div>

<div>Content 1</div>Content 2

Isso permite uma nova linha sem espaço vertical.

Isso se torna

<div>Content 1</div>Content 2

Respondendo em um nível mais geral para quem chegou aqui, pois está corrigindo problemas no espaçamento causado pela <br>tag. Eu tenho que fazer muitas redefinições para chegar perto do pixel perfeito.

br {
    content: " ";
    display: block;
}

Para a questão específica que eu estava abordando, eu precisava ter um espaço específico nas entrelinhas. Eu adicionei uma margem na parte superior e inferior.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

Consegui fazê-lo funcionar no IE7 usando uma combinação de soluções, mas principalmente envolvendo o Br no DIV, como Nigel e outros sugeriram. Identificação adicionada e executada em = "server" para que eu pudesse remover o BR ao remover a caixa de seleção da linha de caixas de seleção.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

Pode estar usando duas tags br, é a solução mais simples que funciona com todos os navegadores. Mas é repetitivo.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

Que tal apenas adicionar um parágrafo em vez da quebra de linha dessa maneira

bla la la bla bla la la bla bla abla la la bla bla

Depois, você pode especificar a altura da linha ou o preenchimento ou o que for