Tengo un gran párrafo de texto que se divide en subpárrafos con <br>'s:

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

Quiero ampliar la brecha entre estos subpárrafos, como si hubiera dos <br>o algo así. Sé que la forma correcta de hacerlo es usarlo <p></p>, pero en este momento no puedo cambiar este diseño, por lo que estoy buscando una solución solo para CSS.

He tratado de establecer <br>'s line-heighty heightcon el display: block, también en Google y desbordamiento de pila-ed brevemente, pero no encontró ninguna solución. ¿Es esto posible sin cambiar el diseño?

Css:

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

La solución probablemente no sea compatible con varios navegadores, pero al menos es algo. También considere configurar line-height:

line-height:22px;

Para Google Chrome, considere configurar content:

content: " ";

Aparte de eso, creo que estás atrapado con una solución de JavaScript.

Aquí está la solución correcta que en realidad tiene soporte para varios navegadores:

  br {
        line-height: 150%;
     }

Entonces, los píos de arriba tienen básicamente una respuesta similar, pero aquí es muy sucinta. Funciona en Opera, Chrome, Safari y Firefox, ¿muy probablemente también en IE?

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

Otra forma es usar un HR . Pero, y aquí está la parte astuta, hazla invisible.

Así:

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

Para hacer una ruptura BR más limpia simulada usando el HR: ¡Btw funciona en todos los navegadores!

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

Por lo que sé <br>, no tiene una altura, simplemente fuerza un salto de línea. Lo que tiene es un texto con algunos saltos de línea además de los ajustes automáticos, no subpárrafos. Puede cambiar el espacio entre líneas, pero eso afectará a todas las líneas.

Acabo de tener este problema y lo solucioné usando

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

puede aplicar altura de línea en ese <p>elemento para que las líneas se vuelvan más grandes.

No he probado el pseudo-elemento :before/ :afterCSS2 antes, principalmente porque solo es compatible con IE8 (esto se refiere a los navegadores IE) . Esta podría ser la única solución CSS posible:

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

Aquí hay un ejemplo en QuirksMode .

Pensé que podrías usar:

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

Pero eso no funcionó en Chrome o Firefox.

Solo pensé en mencionar eso en caso de que se le ocurriera a alguien más y les ahorraría el problema.

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

Funciona en Firefox, Chrome y Safari. No lo he probado en Explorer. (La tableta de Windows no tiene energía).

Los saltos de línea y el tamaño de fuente funcionan de manera diferente en Firefox y Safari.

Curiosamente, si la etiqueta de rotura se escribe en forma completa de la siguiente manera:

<br></br>

entonces la altura de línea CSS: 145% funciona. Si la etiqueta de ruptura se escribe como:

<br> or 
<br/> 

entonces no funciona, al menos en Chrome, IE y firefox. ¡Extraño!

Lo que funciona para mí es agregar esta línea entre las etiquetas de párrafo ... aunque no es la mejor solución.

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

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

Me encontré con problemas con PC / Mac con esto ... Le da al texto la nueva altura de línea pero no hace el salto de línea ... Es posible que desee hacer algunas pruebas usted mismo. ¡Lo siento!

Y recuerde que el uso <hr>incorrecto de la etiqueta como se sugiere en alguna parte terminará con la <p>etiqueta, así que olvídese de esa solución.
Si f.ex. algo tiene un estilo en el entorno <p>, ese estilo desaparece para el resto del contenido después de <hr>insertarlo.

Aquí hay una solución que funciona en IE, Firefox y Chrome. La idea es aumentar el tamaño de fuente del elemento br del tamaño del cuerpo de 14px a 18px, y reducir el elemento en 4px para que el tamaño adicional esté debajo de la línea de texto. El resultado es 4px de espacio en blanco adicional debajo del br.

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

ACTUALIZADO el 13 de septiembre de 2019:

Solía <br class=big>hacer un salto de línea de gran tamaño, cuando lo necesito. Hasta hoy, lo peiné así:

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

( vertical-align:topSolo era necesario para IE y Edge).

Eso funcionó en todos los principales navegadores que probé: Chrome, Firefox, Opera, Brave, PaleMoon, Edge e IE11.

Sin embargo, recientemente dejó de funcionar en los navegadores basados ​​en Chrome : mis saltos de línea "grandes" se convirtieron en saltos de línea de tamaño normal.

(No sé exactamente cuándo lo rompieron. A partir del 12 de septiembre de 2019, todavía funciona en mi Chromium Portable 55.0.2883.11 desactualizado, pero está roto en Opera 63.0.3368.71 y Chrome 76.0.3809.132 (ambos Windows y Android).)

Después de algunas pruebas y errores, terminé con el siguiente sustituto, que funciona en las versiones actuales de todos esos navegadores:

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

Notas:

line-height:190% funciona en todo excepto en las versiones recientes de los navegadores basados ​​en Chrome.

vertical-align:topes necesario para IE y Edge (en combinación con line-height:190%), para obtener el espacio extra que viene después de la línea anterior, donde pertenece, en lugar de parcialmente antes y parcialmente después.

display:block;content:"";margin-top:0.5em funciona en Chrome, Opera y Firefox, pero no Edge e IE.

Una forma alternativa (más simple) de agregar un poco de espacio vertical adicional después de una <br>etiqueta, si no le importa editar el HTML, es con algo como esto. Funciona bien en todos los navegadores:

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

(Por supuesto, puede ajustar el "-37%" según sea necesario, para un espacio mayor o menor). Aquí hay una página de demostración que incluye algunas otras variaciones sobre el tema:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



28 de mayo de 2020:

He actualizado la página de demostración; ahora demuestra todas las técnicas anteriores:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Michael y yoda tienen razón. Lo que puede hacer es usar la <p>etiqueta, que, al ser una etiqueta de bloque, usa un margen inferior para compensar el siguiente bloque, por lo que puede hacer algo similar a esto para obtener un mayor espacio:

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

Otra alternativa es utilizar la <hr>etiqueta de bloque , con la que puede definir explícitamente la altura del espaciado.

<br />ocupará tanto espacio como una fila llena de texto <p>, no puede cambiar eso. Si quieres más grande, significa que quieres separarlo en un párrafo, así que agrega otro <p>. No olvides ser el más semántico posible;)

También puede usar la propiedad "block-quote" en CSS. Eso haría que no afecte a sus líneas individuales, pero le permite establecer parámetros solo para los saltos entre párrafos o "comillas en bloque".

ACTUALIZACIÓN:
Estoy corregido. "blockquote" es en realidad una propiedad html. Lo usas como <p> y </ p> alrededor de tu trabajo. Luego puede establecer los parámetros para su presupuesto de bloque en CSS como

blockquote { margin-top: 20px }

Espero que esto ayude. Es similar a establecer los parámetros en el br y puede o no ser compatible con varios navegadores.

Parece que no puede ajustar la altura de un BR, pero puede hacer que desaparezca de manera confiable usando la pantalla: ninguno

Encontré esta página mientras buscaba una solución para lo siguiente:

Tengo una situación en la que la pasarela de pago de terceros (Worldpay) solo le permite personalizar sus páginas de pago con un máximo de 10k de CSS y HTML (no se permite script) que se inyectan en el cuerpo de su plantilla, y después de algunas BR, etiquetas FONT, etc. Junto con su DTD que fuerza a IE7 / 8 al modo Quirks, ¡esto hace que la personalización entre navegadores sea lo más difícil posible!

Desactivar BR's hace las cosas mucho más consistentes ...

Yo uso estos métodos, pero no sé si el navegador cruzado

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

br {
    display:none;
}

O

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

O

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

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

Intente usar el line-heightatributo CSS en su petiqueta que contiene la bretiqueta. Recuerde que puede usar idsus petiquetas si desea aislarlas, aunque podría ser mejor usar un divaislamiento, IMO.

Lo siento si alguien más ya dijo esto, pero la solución simple es jugar con tu "altura de línea". Si está obteniendo demasiado espacio cuando usa un salto de línea, es simplemente porque tiene la altura de la línea establecida demasiado alta. Puede corregir esto en CSS (pero sepa que afectará todo lo que use esa propiedad) o puede hacer un estilo en línea para anular el CSS.

Tuve que desarrollar una solución para convertir HTML a PDF y centrar verticalmente el texto en las celdas de la tabla, pero nada funcionó excepto ingresar el plano <br>

Entonces, pensando fuera de la caja, he cambiado el tamaño vertical ajustando el tamaño de fuente (en pt).

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

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

Tendría que hacer esto en línea y en cada
elemento, pero debería funcionar en la mayoría de los navegadores Fiddle con la altura de la línea para obtener el efecto deseado. Si lo hace en línea en cada elemento, debería funcionar en la mayoría de los navegadores y correos electrónicos (pero esto es demasiado complejo para discutirlo aquí).

Esto me funcionó cuando no pude lograr que el espacio entre estilos funcionara desde la etiqueta span:

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

Utilizar <div>

<div>Content 1</div>Content 2

Esto permite una nueva línea sin ningún espacio vertical.

Esto se convierte

<div>Content 1</div>Content 2

Responde en un nivel más general para cualquiera que aterrizó aquí, ya que están solucionando problemas en el espacio causado por la <br>etiqueta. Tengo que hacer muchos reinicios para acercarme al píxel perfecto.

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

Para el problema específico que estaba abordando, tenía que tener un espacio específico entre líneas. Agregué un margen a la parte superior e inferior.

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

Lo hice funcionar en IE7 usando un combo de soluciones, pero principalmente envolviendo el Br en DIV como lo sugirieron Nigel y otros. Se agregó Id y se ejecutó en = "servidor" para poder eliminar el BR al eliminar la casilla de verificación de la fila de casillas de verificación.

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

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

Puede estar usando dos etiquetas br es la solución más simple que funciona con todos los navegadores. Pero es repetitivo.

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

¿Qué tal si solo agregamos un párrafo en lugar del salto de línea así?

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

Luego puede especificar la altura de línea o el relleno o lo que sea para ese p