1

Me ha surgido la duda a partir de una maquetación que estoy haciendo y no sé cuál es la diferencia entre usar float o inline-block.

Si uso inline-block entre dos elementos, al segundo elemento siempre le queda un espacio arriba, tal que así:

introducir la descripción de la imagen aquí

Si uso float, evito ese problema, pero los elementos se colocan a su antojo si redimensiono la página.

¿Cuál es la diferencia entre ambos?

¿Y cómo puedo evitar que se genere un espacio encima del segundo elemento al usar inline-block?

6
  • Consejo: No uses floats, aprende Flexbox y grid. Si dejas el código de lo que estás haciendo o imágenes de lo que quieres lograr te puedo hacer un ejemplo con ambos estilos de maquetación. el 10 dic. 2019 a las 21:13
  • 2
    @AndySamuel gracias por el consejo. Estoy aprendiendo a usar flexbox, pero me ha surgido la duda esa porque lo he usado bastantes veces sin saber la diferencia.
    – unanobot
    el 10 dic. 2019 a las 21:21
  • 1
    Deberias agregar tu HTML.
    – alanfcm
    el 10 dic. 2019 a las 21:28
  • 3
    Float literalmente ignora los elementos que estén en medio y envía el elemento al float indicado, si este es left o right y el Inline Block como su nombre normalmente es con los nodos que son hijos el 10 dic. 2019 a las 22:58
  • @Padron es decir, inline-block crea un elemento en línea pero respeta el espacio del resto de elementos, y float se impone por encima de elementos que no sean flotantes, ¿sería esa la explicación?
    – unanobot
    el 11 dic. 2019 a las 16:29

2 respuestas 2

2

Float hace que puedas apilar los elementos en horizontal pero perderás control para poner un elemento en medio, inline-block también hace que apiles elementos en horizontal pero mantendrá uno en el medio y respetará el width del contenedor padre.

Aún así te recomiendo que no uses demasiado estas opciones y como te ha dicho más gente y aprende a usar adecuadamente Flex que te soluciona mucho la vida.

1

Las diferencias son las siguientes:

float (left o right): Apila los elementos a la derecha o a la izquierda, pero como fue creado para poner texto alrededor de una imágen no es conveniente usarlo. Se pierde control del comportamiento del elemento, afectando posiblemente a otros elementos posteriores que quieras agregar.

inline-block: Te permite alinear los elementos uno al lado del otro, teniendo mayor control del comportamiento y es más amigable para los navegadores (No funciona en IE7 y versiones anteriores).

Te recomendaría utilizar display:flex e investigar sobre él. Te permite tener mayor control de los elementos y los nuevos navegadores ya están familiarizados con esta propiedad. Te dejo un ejemplo:

.container {
  display: flex;

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.