Evitar salto de línea después de <h1> o <hr>

3pies · #1 (**permalink**) 24/01/2007, 09:48

Hola a todos...

Bueno, pues quería saber si se puede altrear el comportamiento de esas etiquetas mediantes CSS, para que cada vez que ponga por ejemplo <h1>bla, bla, bla</h1>, no me deje debajo una gran línea en blanco. Me gustaría que no hiciera ese salto de línea tan grande, y si es posible, que no haya ningún salto de línea. Lo mismo, para la etiqueta <hr>, aunque imagino, que si es posible para las <hx>, la misma técnica será de aplicación a <hr>.

Gracias miles!.

caricatos · #2 (**permalink**) 24/01/2007, 10:19

Hola:

No sé si te servirá, pero con display: inline se convierte en un elemento "en línea"

Saludos

3pies · #3 (**permalink**) 24/01/2007, 10:33

Gracias caricatos. Eso me podría servir, porque funciona tanto en IE 7.0, como en FF 2.0, pero...

a) ¿Sabes si eso está soportado por las versiones anteriores de IE y FF?.

b) ¿Es posible que la etiqueta <hX> haga un salto de linea normal y corriente, al estilo <br>, sin necesidad de tener que meterla manualmente al final de cada párrafo?.

Muchas gracias!.

caricatos · #4 (**permalink**) 24/01/2007, 10:43

Hola:

Sobre la compatibilidad no sé desde qué versiones, pero supongo que será en todas, ya que ese estilo es el que diferencia los elementos en bloque de los en línea (y no me refiero a la semántica sino a lo visual)... y si los conviertes en elementos inline, obligatoriamente deberías poner el salto de línea manual... pero si lo que quieres es que se disminuya solamente tal vez te interese más usar el estilo padding... por ejemplo h1 {padding: 0;}

Saludos

3pies · #5 (**permalink**) 24/01/2007, 11:02

Gracias caricatos.

¿Cuándo te refieres a disminuir, estás hablando de reducir la distancia entre el final del párrafo <hX> y el comiendo de la linea siguiente, verdad?. Con el padding a cero, me pega el mismo salto que sin él (tanto en IE como en FF).

Muchas gracias por tu ayuda.

caricatos · #6 (**permalink**) 24/01/2007, 11:11

Hola:

padding son los márgenes interiores y margin los exteriores... si le das un color de fondo a tus tags podrás ver la diferencia... tal vez te interese más combinar ambos estilos.

Saludos

Mikmoro · #7 (**permalink**) 24/01/2007, 11:21

Yo creo que con padding no se va a resolver. Más bien me parece que lo puedes controlar con line-height:

Con cosas como line-height: 0em; ó 1px, o lo que sea.

Mikel.

3pies · #8 (**permalink**) 24/01/2007, 11:27

Mmmmmm, con esto me pega el mismo salto que sin poner el padding:

Código:

<head>
<style>
h1{ font-family: Verdana, Arial, Helvetica; padding: 0;}
</style>
</head>
<body>
<h1>Primera línea</h1>
Segunda línea
</body>

Creo que hoy estoy muy espeso...

AlZuwaga · #9 (**permalink**) 24/01/2007, 11:48

buenas, podrías usar un margin de 0 además del padding

3pies · #10 (**permalink**) 24/01/2007, 12:00

Muchas gracias A_Z, ...hacía tiempo que no te veía.

Ahora sí... Con el margen a cero el salto de línea es como un <br>.

Gracias a caricatos por el inline (desconocido para mí), y a Mikmoro por intentar meterle mano al tema.

Mikmoro · #11 (**permalink**) 24/01/2007, 12:24

Corregidme si me equivoco pero yo diría que si tiene display: inline;, el margin 0 le trae más bien sin cuidado. Es el display inline el que hace que el salto de línea se comporte como un simple br, y con line-heihgt controlas exactamente la altura y distancia que quieres que tenga: 0px, pues como un br, 4px ó 1.3em pues esa distancia de alto exactamente.

Vamos, es lo que creo.

Mikel.

3pies · #12 (**permalink**) 24/01/2007, 12:36

Pues no soy el más indicado en contestar, pero ya me ves aquí lanzao

Creo que no, Mikmoro. El inline evita el salto de línea propio de determinadas etiquetas (ul, hr, h1, h2, etc.), y el margin a cero (sin el inline), lo que hace es provocar un salto de línea convencional, al estilo de la etiqueta <br>.

Salu2

AlZuwaga · #13 (**permalink**) 24/01/2007, 12:56

Yo no voy a corregir a nadie :), solo decir que si tiene el display inline los únicos márgenes que no tiene en cuenta son el superior e inferior mas si el izquierdo y derecho.

3pies, yo también hacía tiempo que no te veía (al igual que a Mikmoro, caricatos y al resto de la manada de este foro).
Exactamente hace 26 días ya que ayer volví de mis vacaciones ;)

Mikmoro · #14 (**permalink**) 24/01/2007, 13:26

A ver, que me estoy perdiendo un poco. He dicho:
"si tiene display: inline;, el margin 0 le trae más bien sin cuidado"

y es cierto, ¿no? Creo que como dice Al Zuwaga, en el margen superior e inferior, que es lo que nos ocupa.
display: inline + margin arriba-abajo=

Efectivamente, con display block o sin display el margin actuará sobre él.
display: block;+margin=

En todos los casos, line-height te dará la distancia que tú quieras.
display: block ó inline; + line-height =

Eso era lo que yo quería decir. Padding no resolvería si era para reducir la distancia del salto.

Ahora releyendo tu primer mensaje veo que lo que querías era que no hubiera ningún salto mayor que un simple br, no controlar la distancia. Creo que mirando las respuestas he olvidado cuál era la primera cuestión.

En ese caso, efectivamente block + margin era la mejor opción. Aclaro y me la envaino.

Mikel.