margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo corregirlo?

SLD · #1 (**permalink**) 19/11/2019, 08:54

Hola.

Por favor observen ésta símple linea:

Código:

<style>h1{
text-align:center;
font-size:5em;
border:1px solid #000;
margin:0;
padding:0;
}
img{
outline:none;
vertical-align:middle;
border:1px solid #000;
margin:0;
padding:0;
}
</style>

<h1>M<img src="https://www.w3.org/Icons/feed.jpg" />W</h1>

en ésa sencillísima línea tengo estos dos problemas:

el "áire" (margen entre el BORDE y el contenido del elemento H1
no lógro centrar ningún ícono

por favor me ayudan a resolverlo y en lo posible "entender" por que no se centra ningún ícono y por que se genera ése MARGIN "áire" pése a que utilizo MARGIN y PADDING a valor 0.

Gracias!

ArturoGallegos · #2 (**permalink**) 19/11/2019, 09:18

Sin ver el código en acción aquí van mis teorías conspiratorias

1.- vertical-align es para tablas
2.- img siempre genera un espacio en la parte inferior, se le debe aplicar line-height 0 o bien un display:block
3.- para centrarlo sírvete utilizar display flex en el contenedor

SLD · #3 (**permalink**) 19/11/2019, 09:31

Cita:

Iniciado por ArturoGallegos

Sin ver el código en acción aquí van mis teorías conspiratorias

1.- vertical-align es para tablas
2.- img siempre genera un espacio en la parte inferior, se le debe aplicar line-height 0 o bien un display:block
3.- para centrarlo sírvete utilizar display flex en el contenedor

gracias Arturo.

He seguido tus instrucciones y el atributo flex en el tag IMG me deforma la imágen y en el TAG H1 me genera unos saltos de línea.

Al colocar line-height; en IMG no hay cambios.

dáme + info plis

Cita:

Iniciado por ArturoGallegos

1.- vertical-align es para tablas

incorrecto.

DragonX · #4 (**permalink**) 19/11/2019, 14:21

Código CSS:

Ver originalh1{
font-size:5em;
border:1px solid #000;
margin:0;
padding:0;
display: flex;
align-items: center;
}
img{
outline:none;
border:1px solid #000;
margin:0;
padding:0;
}

Código HTML:

Ver original<h1>M<img src="https://www.w3.org/Icons/feed.jpg" />W</h1>

Slds.-

SLD · #5 (**permalink**) 19/11/2019, 15:23

Cita:

Iniciado por DragonX

Código CSS:

Ver originalh1{
font-size:5em;
border:1px solid #000;
margin:0;
padding:0;
display: flex;
align-items: center;
}
img{
outline:none;
border:1px solid #000;
margin:0;
padding:0;
}

Código HTML:

Ver original<h1>M<img src="https://www.w3.org/Icons/feed.jpg" />W</h1>

Slds.-

Gracias DragonX.

Puedes ver que el H1 continúa con el MARGIN o "áire"...

Cómo lo elimino?, por que persíste pése a que utilizo padding:0 y margin:0 ??

ArturoGallegos · #6 (**permalink**) 19/11/2019, 17:01

coloca tu código en jsfiddle.net para poderlo ver en acción y sobre todo verlo como tu lo estas viendo

SLD · #7 (**permalink**) 19/11/2019, 17:17

Cita:

Iniciado por ArturoGallegos

coloca tu código en jsfiddle.net para poderlo ver en acción y sobre todo verlo como tu lo estas viendo

Gracias Maestro Gallegos.

Utilizando el código del maestro DragonX se vé así: https://pasteboard.co/IHtygZj.pngy requiero eliminar ése margin superior e inferior, también quisiera saber por qué se genera.

PD: pueden correrlo en cualquier lugar, y se vé ése "ESPACIADO" arriba y abájo.

Con line-height puede manejarse, pero lo ideal sería SIN ése atributo para poderlo manejar en MUCHOS códigos...

SLD · #8 (**permalink**) 19/11/2019, 17:22

Cita:

Iniciado por ArturoGallegos

coloca tu código en jsfiddle.net para poderlo ver en acción y sobre todo verlo como tu lo estas viendo

Aquí está maestro Gallegos: https://jsfiddle.net/nLs8jq5v

gracias!

el_agu_4ever · #9 (**permalink**) 20/11/2019, 09:15

El aire, te refieres al hueco que queda arriba del recuadro??

DragonX · #10 (**permalink**) 20/11/2019, 10:35

Es un tema de line-height default del elemento, usa este css

Código CSS:

Ver originalh1{
    font-size:5em;
    border:1px solid #000;
    margin:0;
    padding:0;
    display: flex;
    align-items: center;
    line-height: .7;
    }
    img{
    outline:none;
    border:1px solid #000;
    margin:0;
    padding:0;
    }

Slds!!

SLD · #11 (**permalink**) 20/11/2019, 10:53

Cita:

Iniciado por el_agu_4ever

El aire, te refieres al hueco que queda arriba del recuadro??

Gracias el_agu_4ever.

Sí, precisamente a ese espacio tánto ARRIBA como ABAJO.

¿cómo eliminarlo? (corregirlo)!

SLD · #12 (**permalink**) 20/11/2019, 10:58

Gracias DragonX

Utilizar line-height: .7; es un "parche" que únicamente funcionará en los elementos con fuente font-size:5em;, luego, al cambiar de SIZE se desconfigurará todo el diseño...

Cómo puede eliminarse ése "AIRE" o MARGIN ?
La sugerencia de DragonX solo funciona para los elementos con font-size:5em; no para "los elementos", que es lo que quisiera solucionar.

DragonX · #13 (**permalink**) 21/11/2019, 11:35

Si el line height es relativo al font size lo solucionas!