Ho un grande paragrafo di testo che è diviso in sottoparagrafi con <br>'s:

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

Voglio ampliare il divario tra questi sottoparagrafi, come se ce ne fossero due <br>o qualcosa del genere. So che il modo giusto per farlo è usare <p></p>, ma al momento non posso cambiare questo layout, quindi sto cercando una soluzione solo CSS.

Ho provato impostazione <br>'s line-heighte heightcon display: block, ho anche Googled e Stack Overflow-ed brevemente, ma non ho trovato alcuna soluzione. È possibile anche senza modificare il layout?

CSS:

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

La soluzione probabilmente non è compatibile con più browser, ma almeno è qualcosa. Considera anche l'impostazione line-height:

line-height:22px;

Per Google Chrome, considera l' impostazione content:

content: " ";

Oltre a questo, penso che tu sia bloccato con una soluzione JavaScript.

Ecco la soluzione corretta che ha effettivamente il supporto cross-browser:

  br {
        line-height: 150%;
     }

Quindi, i capolini sopra hanno sostanzialmente una risposta simile, ma qui è molto succintamente. Funziona in Opera, Chrome, Safari e Firefox, molto probabilmente anche IE?

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

Un altro modo è utilizzare un HR . Ma, ed ecco la parte astuta, rendilo invisibile.

Quindi:

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

Per fare una rottura BR più pulita simulata usando HR: Btw funziona in tutti i browser !!

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

Per quanto ne so <br>non ha un'altezza, forza semplicemente un'interruzione di riga. Quello che hai è un testo con alcune interruzioni di riga oltre a quelle a capo automatico, non sottoparagrafi. È possibile modificare l'interlinea, ma ciò influirà su tutte le linee.

Ho appena avuto questo problema e l'ho aggirato usando

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

puoi applicare l'altezza della linea a <p>quell'elemento, in modo che le linee diventino più grandi.

Non ho mai provato lo pseudo-elemento :before/ :afterCSS2, principalmente perché è supportato solo in IE8 (questo riguarda i browser IE) . Questa potrebbe essere l'unica soluzione CSS possibile:

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

Ecco un esempio su QuirksMode .

Ho pensato che potresti essere in grado di usare:

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

Ma questo non ha funzionato su Chrome o Firefox.

Ho solo pensato di menzionarlo nel caso fosse venuto in mente a qualcun altro e gli avrei risparmiato la fatica.

È interessante notare che se il tag break è scritto in forma completa come segue:

<br></br>

quindi l'altezza della riga CSS: 145% funziona. Se il tag break è scritto come:

<br> or 
<br/> 

quindi non funziona, almeno in Chrome, IE e Firefox. Strano!

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

Funziona con Firefox, Chrome e Safari. Non sono stati testati in Explorer. (Il tablet Windows è spento.)

Le interruzioni di riga e la dimensione del carattere funzionano in modo diverso in Firefox e Safari.

AGGIORNATO 13 settembre 2019:

Io uso <br class=big>per fare un'interruzione di riga sovradimensionata, quando ne ho bisogno. Fino ad oggi, l'ho disegnato in questo modo:

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

( vertical-align:topEra necessario solo per IE e Edge.)

Ha funzionato con tutti i principali browser che ho provato: Chrome, Firefox, Opera, Brave, PaleMoon, Edge e IE11.

Tuttavia, recentemente ha smesso di funzionare nei browser basati su Chrome : le mie interruzioni di riga "grandi" si sono trasformate in interruzioni di riga di dimensioni normali.

(Non so esattamente quando l'hanno rotto. A partire dal 12 settembre 2019 funziona ancora nel mio Chromium Portable 55.0.2883.11 obsoleto, ma è rotto in Opera 63.0.3368.71 e Chrome 76.0.3809.132 (entrambi Windows e Android).)

Dopo alcuni tentativi ed errori, sono finito con il seguente sostituto, che funziona nelle versioni attuali di tutti quei browser:

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

Appunti:

line-height:190% funziona in tutto tranne che nelle versioni recenti dei browser basati su Chrome.

vertical-align:topè necessario per IE e Edge (in combinazione con line-height:190%), per ottenere lo spazio extra dopo la riga precedente, a cui appartiene, piuttosto che parzialmente prima e parzialmente dopo.

display:block;content:"";margin-top:0.5em funziona in Chrome, Opera e Firefox, ma non in Edge e IE.

Un modo alternativo (più semplice) per aggiungere un po 'di spazio verticale extra dopo un <br>tag, se non ti dispiace modificare l'HTML, è con qualcosa del genere. Funziona bene in tutti i browser:

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

(Puoi, ovviamente, regolare il "-37%" secondo necessità, per uno spazio maggiore o minore.) Ecco una pagina demo che include alcune altre variazioni sul tema:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



28 maggio 2020:

Ho aggiornato la pagina demo; ora dimostra tutte le tecniche di cui sopra:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Ciò che funziona per me è aggiungere questo inline tra i tag di paragrafo ... non è la soluzione migliore però.

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

-------- Modificare ---------

Ho riscontrato problemi con PC / Mac con questo ... Assegna al testo la nuova altezza di riga ma non interrompe la riga ... Potresti voler fare alcuni test da solo. Spiacente!

E ricorda che (male) usare il <hr>tag come suggerito da qualche parte, terminerà il <p>tag, quindi dimentica quella soluzione.
Se f.ex. qualcosa è disegnato sull'ambiente circostante <p>, quello stile è sparito per il resto del contenuto dopo che <hr>è stato inserito.

Ecco una soluzione che funziona in IE, Firefox e Chrome. L'idea è di aumentare la dimensione del carattere dell'elemento br dalla dimensione del corpo di 14px a 18px e abbassare l'elemento di 4px in modo che la dimensione extra sia sotto la riga di testo. Il risultato è 4px di spazio bianco extra sotto br.

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

Michael e Yoda hanno entrambi ragione. Quello che puoi fare è usare il <p>tag, che, essendo un tag di blocco, utilizza un margine inferiore per compensare il blocco seguente, quindi puoi fare qualcosa di simile a questo per ottenere una spaziatura maggiore:

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

Un'altra alternativa è utilizzare il <hr>tag block , con il quale è possibile definire esplicitamente l'altezza della spaziatura.

<br />occuperà tanto spazio quanto la tua riga piena di testo <p>, non puoi cambiarlo. Se vuoi più grande, significa che vuoi separare in un paragrafo, quindi aggiungi altro <p>. Non dimenticare di essere il più semantico possibile;)

potresti anche usare la proprietà "block-quote" nei CSS. Ciò farebbe in modo che non influenzi le tue singole righe ma ti consenta di impostare i parametri solo per le interruzioni tra i paragrafi o le "virgolette".

AGGIORNAMENTO:
sono corretto. "blockquote" è in realtà una proprietà html. Lo usi proprio come <p> e </ p> nel tuo lavoro. È quindi possibile impostare i parametri per la citazione del blocco in CSS come

blockquote { margin-top: 20px }

Spero che sia di aiuto. È simile all'impostazione dei parametri su br e può o meno essere compatibile con browser incrociati.

Non sembra che tu sia in grado di regolare l'altezza di un BR, ma puoi farlo scomparire in modo affidabile utilizzando il display: nessuno

Mi sono imbattuto in questa pagina mentre cercavo una soluzione a quanto segue:

Ho una situazione in cui il gateway di pagamento di terze parti (Worldpay) ti consente solo di personalizzare le loro pagine di pagamento con un massimo di 10k di CSS e HTML (nessuno script consentito) che vengono inseriti nel corpo del loro modello e dopo alcuni BR, tag FONT ecc. Accoppiato con il loro DTD che forza IE7 / 8 in modalità Quirks, questo rende la personalizzazione cross-browser più difficile che mai!

Disattivare i BR rende le cose molto più coerenti ...

Uso questi metodi, ma non so se cross-browser

================= Metodo 1 ==================

br {
    display:none;
}

O

================= Metodo 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;
}

O

================= Metodo 3 ==================

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

Prova a utilizzare l' line-heightattributo CSS sul ptag che contiene il brtag. Ricorda che puoi usare i idtuoi ptag se vuoi isolarli, anche se potrebbe essere meglio usare un divper l'isolamento, IMO.

Scusa se qualcun altro l'ha già detto, ma la soluzione semplice è giocare con la tua "altezza della linea". Se stai ottenendo troppo spazio quando usi un'interruzione di riga, è semplicemente perché hai impostato l'altezza della linea troppo alta. Puoi correggerlo in CSS (ma sappi che influenzerà tutto ciò che usa quella proprietà) oppure puoi fare uno stile in linea per sovrascrivere il CSS.

Ho dovuto sviluppare una soluzione per convertire HTML in PDF e centrare verticalmente il testo nelle celle della tabella, ma niente ha funzionato tranne l'inserimento del semplice <br>

Quindi, pensando fuori dagli schemi, ho cambiato la dimensione verticale regolando la dimensione del carattere (in pt).

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

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

Dovresti farlo in linea e su ogni
elemento, ma dovrebbe funzionare sulla maggior parte dei browser Fiddle con l'altezza della linea per ottenere l'effetto desiderato. Se lo rendi in linea su ogni elemento, dovrebbe funzionare sulla maggior parte dei browser e della posta elettronica (ma questo è troppo complesso per discuterne qui).

Questo ha funzionato per me quando non riuscivo a far funzionare la spaziatura dello stile dal tag span:

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

Uso <div>

<div>Content 1</div>Content 2

Ciò consente una nuova linea senza alcuno spazio verticale.

Questo diventa

<div>Content 1</div>Content 2

Risposta a un livello più generale per chiunque sia atterrato qui poiché sta risolvendo problemi di spaziatura causati dal <br>tag. Devo fare molti ripristini per avvicinarmi al pixel perfetto.

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

Per il problema specifico che stavo affrontando dovevo avere uno spazio specifico tra le righe. Ho aggiunto un margine in alto e in basso.

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

L'ho fatto funzionare in IE7 utilizzando una combinazione di soluzioni, ma principalmente avvolgendo il Br in DIV come suggerito da Nigel e altri. Aggiunto ID ed eseguito su = "server" in modo da poter rimuovere il BR durante la rimozione della casella di controllo dalla riga di caselle di controllo.

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

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

L'utilizzo di due tag br è la soluzione più semplice che funziona con tutti i browser. Ma è ripetitivo.

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

Che ne dici di aggiungere un paragrafo invece dell'interruzione di riga in questo modo

bla la la bla bla abla la la bla bla abla la la bla bla a

Quindi puoi specificare l'altezza della linea o il padding o qualsiasi altra cosa per quella p