Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo corregirlo? en el foro de CSS en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 19/11/2019, 08:54
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 63
Antigüedad: 6 años
Puntos: 0
margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo corregirlo?

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:
  1. el "áire" (margen entre el BORDE y el contenido del elemento H1
  2. 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!

Última edición por SLD; 19/11/2019 a las 09:00
  #2 (permalink)  
Antiguo 19/11/2019, 09:18
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.565
Antigüedad: 11 años, 9 meses
Puntos: 1087
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

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
  #3 (permalink)  
Antiguo 19/11/2019, 09:31
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 63
Antigüedad: 6 años
Puntos: 0
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

Cita:
Iniciado por ArturoGallegos Ver Mensaje
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 Ver Mensaje
1.- vertical-align es para tablas
incorrecto.
  #4 (permalink)  
Antiguo 19/11/2019, 14:21
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.426
Antigüedad: 17 años, 6 meses
Puntos: 175
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

Código CSS:
Ver original
  1. h1{
  2. font-size:5em;
  3. border:1px solid #000;
  4. margin:0;
  5. padding:0;
  6. display: flex;
  7. align-items: center;
  8. }
  9. img{
  10. outline:none;
  11. border:1px solid #000;
  12. margin:0;
  13. padding:0;
  14. }

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

Slds.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #5 (permalink)  
Antiguo 19/11/2019, 15:23
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 63
Antigüedad: 6 años
Puntos: 0
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

Cita:
Iniciado por DragonX Ver Mensaje
Código CSS:
Ver original
  1. h1{
  2. font-size:5em;
  3. border:1px solid #000;
  4. margin:0;
  5. padding:0;
  6. display: flex;
  7. align-items: center;
  8. }
  9. img{
  10. outline:none;
  11. border:1px solid #000;
  12. margin:0;
  13. padding:0;
  14. }

Código HTML:
Ver original
  1. <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 ??


  #6 (permalink)  
Antiguo 19/11/2019, 17:01
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.565
Antigüedad: 11 años, 9 meses
Puntos: 1087
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

coloca tu código en jsfiddle.net para poderlo ver en acción y sobre todo verlo como tu lo estas viendo
  #7 (permalink)  
Antiguo 19/11/2019, 17:17
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 63
Antigüedad: 6 años
Puntos: 0
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

Cita:
Iniciado por ArturoGallegos Ver Mensaje
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...
  #8 (permalink)  
Antiguo 19/11/2019, 17:22
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 63
Antigüedad: 6 años
Puntos: 0
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

Cita:
Iniciado por ArturoGallegos Ver Mensaje
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!
  #9 (permalink)  
Antiguo 20/11/2019, 09:15
Avatar de el_agu_4ever  
Fecha de Ingreso: agosto-2004
Mensajes: 230
Antigüedad: 15 años, 3 meses
Puntos: 5
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

El aire, te refieres al hueco que queda arriba del recuadro??
  #10 (permalink)  
Antiguo 20/11/2019, 10:35
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.426
Antigüedad: 17 años, 6 meses
Puntos: 175
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

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

Código CSS:
Ver original
  1. h1{
  2.     font-size:5em;
  3.     border:1px solid #000;
  4.     margin:0;
  5.     padding:0;
  6.     display: flex;
  7.     align-items: center;
  8.     line-height: .7;
  9.     }
  10.     img{
  11.     outline:none;
  12.     border:1px solid #000;
  13.     margin:0;
  14.     padding:0;
  15.     }

Slds!!
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #11 (permalink)  
Antiguo 20/11/2019, 10:53
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 63
Antigüedad: 6 años
Puntos: 0
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

Cita:
Iniciado por el_agu_4ever Ver Mensaje
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)!
  #12 (permalink)  
Antiguo 20/11/2019, 10:58
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 63
Antigüedad: 6 años
Puntos: 0
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

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.
  #13 (permalink)  
Antiguo 21/11/2019, 11:35
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.426
Antigüedad: 17 años, 6 meses
Puntos: 175
Respuesta: margin:0;padding:0; pero sigo con "aire" y SIN poder centrar, ¿cómo correg

Si el line height es relativo al font size lo solucionas!
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho



La zona horaria es GMT -6. Ahora son las 21:09.