¿Cómo simulo <br/> (la etiqueta br) usando CSS?

CSS:

.top, .title { 
font-weight: bold; 
} 
.bottom, .Content { 
}

HTML:

<span class='title'>Title</span> 
<br/> 
<span class='Content'>Content</span> 
<br/><br/>

quisiera sustituir la etiqueta <br/> con un equivalente en CSS, pero Estoy luchando con eso. Apreciaría cualquier ayuda.

He intentado margen inferior, margen superior, altura de línea, nada de eso funcionó.

Fuente

2012-02-07 user717236

Utilizaría márgenes, ¿qué quiere decir con 'nada funcionó'? Sus clases CSS no se relacionan con su marcado HTML. – devdigital

Tiene razón, en cuanto a las clases CSS y el marcado HTML. Modifiqué la pregunta. Muchas gracias por señalar eso. Lo mismo ocurre con los márgenes, aunque según este enlace, http://www.codertools.com/css_help_guide/css_z-index.aspx, Firefox trata los márgenes de forma diferente que IE para los elementos de etiqueta span. – user717236

<span> es un elemento en línea, por lo que no se han aplicado margin, sino que puede llevar padding - darle algo así como .title { padding: 10px 0; } y va a simular un párrafo, o simplemente .title { display: block; } para obligar a la siguiente cosa que ir debajo de ella.

Fuente

2012-02-07 22:48:07 Joe

uso display:block; en span,

como:

.title, .Content { display:block; }

Fuente

2012-02-07 22:46:46 Shpetim

Bueno, el problema es que se está utilizando un "lapso", que es una etiqueta en línea. Tiene que usar un elemento de bloque para poder usar margen inferior, por ejemplo.

Usted podría intentar esto:

.top { 
    font-weight: bold; 
    display: block; 
} 
.bottom { 
    display: block; 
}

O también se podría utilizar display: inline-block;

Fuente

2012-02-07 22:47:04 Chris

display: block; sin embargo, <span> es semánticamente probablemente la etiqueta incorrecta para usar (siendo una etiqueta en línea en lugar de una etiqueta de bloque); <div> es probablemente una combinación mejor, y viene con la ventaja de que ya se muestra como un bloque. Otras etiquetas pueden ser aún más apropiadas.

Fuente

2012-02-07 22:47:29

Semánticamente, le conviene usar una etiqueta de encabezado (h1, h2, etc.) para el título y una etiqueta de párrafo (p) para el contenido. Ambos son elementos de nivel de bloque, para los cuales funcionan cosas como margin y line-height.

Una etiqueta span es un elemento en línea, que (para todos los efectos) significa que está destinado a estar en el medio de un elemento de nivel de bloque sin estropear el resto de la etiqueta.

Si realmente desea permanecer con un tramo, puede forzar el tramo para que se comporte como un elemento de nivel de bloque dándole la propiedad CSS display: block. Sin embargo, le recomiendo que utilice elementos reales de nivel de bloque, como las etiquetas h1 o p.

Fuente

2012-02-07 22:47:55 Jemaclus

Tuve un problema similar al tratar con WordPress. Wordpress es conocido por eliminar automáticamente los caracteres de formateo del texto de un usuario para un artículo de blog. Mi desafío fue centrar el texto del artículo y dividir la línea en dos.

Esto lo que hice:

<centro> Se trata de una línea de título muy largo que desee mostrar en mi <div> WordPress Título del artículo Línea </div > </centro >

La acción el centro < > es bastante auto explicativo. Como <div> es un elemento de nivel de bloque, emite una nueva línea.

Espero que esto ayude.

Fuente

2013-01-25 02:13:22

Puede simular etiquetas BR ancho de CSS como esto:

span:after { 
    content: ' '; 
    display: block; 
}

con el selector ": antes de que" si usted necesita el "ancho" ha simulado antes de que el contenido lapso

jsfiddle

Fuente

2013-11-04 22:30:21

Tenga en cuenta que esto no crea un salto de línea para elementos de bloque en línea. http://jsfiddle.net/luken/yNxF4/ – Luke

<style> 
p.break{ 
    display:block; 
    clear: both; 
} 
</style>

Fuente

2014-01-05 13:49:40 user3162041

¿Cómo simulo <br/> (la etiqueta br) usando CSS?

Respuesta

Cuestiones relacionadas