No puedo eliminar el margen entre dos campos de entrada

Estoy tratando de eliminar el margen entre la barra de búsqueda y el "Ir". botón en la parte superior de esta página: http://beta.linksku.com/No puedo eliminar el margen entre dos campos de entrada

He intentado eliminar todos los estilos y agregar margin:0;padding:0;border:none;, pero todavía hay un margen entre los dos elementos. No puedo replicar este problema en JSFiddle, pero ocurre en todos los navegadores en mi sitio web.

Fuente

2012-03-23 Leo Jiang

¿Cuál es el problema? ¿Desea mover el botón Ir y el campo de entrada más juntos? – Connor

¿Qué sucede si coloca algo así como un margen negativo (por ejemplo, 'margin-left: -5px') en el campo" Go! " ¿botón? –

Así es como funcionan como elementos inline-block.

Normalmente, cuando utiliza inline-block elementos, a menudo los utiliza dentro de un párrafo, por lo que el espacio entre las letras debe ser coherente. inline-block elementos se aplican a esta regla también.

Si desea eliminar el espacio por completo, puede flotar los elementos.

float: left;

También puede quitar los espacios en blanco de su documento de plantilla. De la misma manera:

<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />

Fuente

2012-03-23 01:00:39 martinjlowm

Puede establecer el tamaño de fuente en 0: ¡no es necesario flotar! – benesch

¡Seguro que sí! Encuentro que flotar es una forma más razonable de evitar esto. Probablemente debería eliminar la parte 'tener que' :) – martinjlowm

@primatology establecer el tamaño de fuente en 0?!?! ¿Dónde aprendiste eso? 'float'ing es la mejor respuesta en este escenario, ya que el OP quiere mover los elementos fuera del flujo normal para tener más control sobre el posicionamiento ... – xandercoded

Ese espacio en blanco es relativo al tamaño de la fuente. Se puede quitar mediante la adición de font-size:0 en el envase de sus entradas, en este caso una forma, así:

form { 
    font-size: 0; 
}

Fuente

2012-03-23 01:00:18

El espacio que está viendo es el relleno predeterminado aplicado a los elementos en línea. ¿Hack más simple? Establezca font-size: 0 en el form, luego restablezca el tamaño real de fuente en la entrada y el botón.

Magia.

form { 
    font-size: 0; 
} 

form input { 
    font-size: 12px;

¿Por qué ocurre esto? El navegador interpreta el espacio en blanco entre input s como un espacio de texto, y lo representa en consecuencia. También puedes juntar todos tus elementos en una sola línea, pero esa sopa de códigos es fea.

Fuente

2012-03-23 01:01:24 benesch

@Xander, no estoy de acuerdo. El ancho de un espacio no es coherente entre los navegadores :( – benesch

se concede, aunque esta solución requiere más pulsaciones de teclas y puede ser difícil de mantener si se implementa en múltiples áreas ... – xandercoded

El uso de cromo en el Mac, que puede deshacerse del espacio si puedo editar el nodo formulario como HTML en las Herramientas para desarrolladores, y quitar el espacio entre las dos etiquetas de cierre así:

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"> 
     <input type="submit" value="Go!" class="btn"> 
     </form>

se convierte en:

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn"> 
     </form>

Fuente

2012-03-23 01:05:51

una manera es eliminar el espacio, pero si usted no está dispuesto a tener un lío de una línea ilegible, puede usar comentario HTML:

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"><!-- 
    !--><input type="submit" value="Go!" class="btn"> 
</form>

Fuente

2017-06-08 08:48:18 BusyBeingDelicious

No puedo eliminar el margen entre dos campos de entrada

Respuesta

Cuestiones relacionadas