cómo eliminar espacio extra entre botones?

por favor revisa este código en jsfiddle

HTML:

 

CSS:

 #main { width: 64em; height: 25em; } #menu { background-color: #00b875; height: 3em; } .buttons { text-decoration: none; color: #ffffff; line-height: 3em; display: inline-block; padding-left: 10px; padding-right: 10px; font-family: courier new; -moz-transition: 1s linear; -ms-transition: 1s linear; -o-transition: 1s linear; -webkit-transition: 1s linear; transition: 1s linear; } .buttons:hover { background-color: #0d96d6; } 

Al cambiar de un botón a otro muy rápidamente, notará que hay un espacio entre dos botones. quiero deshacerme de este espacio ¿algunas ideas? Si responde la pregunta, explique también por qué cierta propiedad solucionará esto.

Sé que es modificable mediante el relleno y el margen, pero es probable que el resultado se distorsione con el zoom. por favor señale una forma estable de resolver el problema.

Gracias

Mira este jsFiddle

He actualizado display:inline-block; para display:block; en los enlaces de menú y float:left añadido float:left .

Cuando use inline-block , tendrá este desagradable espacio en línea entre los elementos causado por el espacio en blanco entre los elementos en su marcado HTML .

Cualquier espacio en blanco entre las tags en HTML se contrae en un único carácter de espacio, por lo que tiene esa brecha.

Tú podrías:

  • Flota tus elementos a la izquierda,
  • Coloque los y uno al lado del otro en la fuente o
  • Use un font-size: 0 truco

En este caso, personalmente dejaría todo lo que quedaba a mi izquierda, aunque eliminar el espacio en blanco de la fuente viene con la menor cantidad de advertencias, siendo la única que es más difícil de leer.

Después de todas las soluciones float y CSS hacks, aquí hay una manera de eliminar los espacios en sí:

  

No digo que debas hacerlo así, pero es una opción, y técnicamente es mucho menos un hack que flotar a la izquierda; esto es lo más parecido a no tener el espacio en absoluto (a menos que escriba todos los enlaces en una fila que se ve feo y hace que sea difícil insertar / eliminar / reordenar).

De nuevo, sé que parece extraño, pero el verdadero bicho raro es el HTML en sí mismo, que no te da una manera clara de hacerlo.

Es posible que desee leer este artículo sobre el tema de Chris Couier

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

aquí está tu solución

http://jsfiddle.net/NPqSr/7/

 .buttons { text-decoration: none; color: #ffffff; line-height: 3em; display: inline-block; padding-left: 10px; float:left; padding-right: 10px; font-family: courier new; -moz-transition: 1s linear; -ms-transition: 1s linear; -o-transition: 1s linear; -webkit-transition: 1s linear; transition: 1s linear; } 

Pruebe esto (JSFiddle)

CSS

 #main { height: 25em; } #menu { background-color: #00b875; height: 3em; } .buttons { text-decoration: none; color: #ffffff; line-height: 3em; display: inline-block; padding-left:5px; padding-right:5px; font-family: courier new; -moz-transition: 1s linear; -ms-transition: 1s linear; -o-transition: 1s linear; -webkit-transition: 1s linear; transition: 1s linear; } .buttons:hover { background-color: #0d96d6; } 

Creo que con las últimas posibilidades de CSS, una solución más limpia es usar display:inline-flex en el menú y la display:flex botones de display:flex , y quizás width:100% en el menú:

http://jsfiddle.net/NPqSr/212/

Es 2017 : envuélvalos dentro de un elemento con display: inline-flex y flexe los botones internos con algo así como flex: 0 1 auto :

 

Agregue el estilo de abajo a su botón. Si es necesario, haga que el margen sea negativo para el primero de los pocos botones.

botón { margin: 0px; }