CSS - quitar espacio entre el hover y borde .

Ging · 20 Jul 2017

Hola , por algun motivo o falla mia no se como quitar el espacio que sale entre el hover y un border

les comparto el codepen
A Pen by Ging

como pueden ver es un pequeño espacio que queda entre el background del hover y el border .

(estoy usando normalize.css y )

si alguien me ayuda se lo agredeceria :encouragement: por que algo tan simple no me sale 😕

evilpudu · 20 Jul 2017

[MENTION=173214]Ging[/MENTION] Modifica tu `nav` agregando `display: flex;`

Insertar CODE, HTML o PHP:

nav {
  display: flex;
  width: 100%;
  background: #3ca4d0;
}

crist0sant0 · 20 Jul 2017

El espacio se crea con el 'Salto de linea' en cada Anchor o Ancla ( <a> ) declarado 'inline-block' en la hoja de estilos, si la colocas una después de la otra ( <a></a><a></a> ) sin el 'Salto de Linea' lograrás quitar el espacio.

Podrás solucionarlo con agregar 'margin-left:-5px' en el Ancla ( <a> ) y 'margin-left: 0' al primer Anchor: A Pen by Cristian Santander

No obstante, te recomiendo usar una 'Lista desordenada' (<ul>) dentro de la Navegación.

Saludos [MENTION=173214]Ging[/MENTION], espero haber ayudado.

Ging · 20 Jul 2017

evilpudu dijo:
[MENTION=173214]Ging[/MENTION] Modifica tu `nav` agregando `display: flex;`

Insertar CODE, HTML o PHP:

nav { display: flex; width: 100%; background: #3ca4d0; }

Muchas gracias problema resuelto :encouragement: .

pero no entiendo la función del flex en esa parte .

- - - Actualizado - - -

crist0sant0 dijo:
El espacio se crea con el 'Salto de linea' en cada Anchor o Ancla ( <a> ) declarado 'inline-block' en la hoja de estilos, si la colocas una después de la otra ( <a></a><a></a> ) sin el 'Salto de Linea' lograrás quitar el espacio.

Podrás solucionarlo con agregar 'margin-left:-5px' en el Ancla ( <a> ) y 'margin-left: 0' al primer Anchor: A Pen by Cristian Santander

No obstante, te recomiendo usar una 'Lista desordenada' (<ul>) dentro de la Navegación.

Saludos [MENTION=173214]Ging[/MENTION], espero haber ayudado.

pero ya los ul lista no me convence para hacer nav o al menos en este caso. en todo caso tambien sirve tu codigo :encouragement:

CSS - quitar espacio entre el hover y borde .

Ging

evilpudu

crist0sant0

Ging

Temas similares