Propiedades CSS: Inline block vs Float
HTML-код
- Опубликовано: 9 фев 2025
- ¿Que propiedad es mejor para el layout en columnas de elementos? ¿Es verdad que ya no se debe usar float?
Inscribete al curso: escuela.digital/
Visítanos en nuestra página web escuela.digital
Síguenos en Facebook: escuela.digital...
Síguenos en Twitter: escuela.digital...
Únete a la comunidad Escuela Digital en Facebook:
escuela.digital...
Yo la verdad es que estoy empezando ahora y la verdad es que tengo ya una edad avanzada, tengo 60 años, y además he visto que el ultimo comentario es de hace ya 2 años, de cualquier forma me parecen unos tutoriales bastante didacticos pues cosas que me habían explicado no he llegado a entendelas de forma más completa hasta que vi los videos de position desarrollados por Alvaro Felipe
Yo os escribo desde España y además tengo que deciros que a lo mejor no es algo importante para vosotros y que no os resulte pedante, pero me gusta mucho el castellano que usan ustedes.
Les doy las gracias por estos tutoriales, aunque veo que ya hace varios años de su edición y publicación, un saludo
Han pasado ya 4 años. Me pregunto como le habrá ido a usted en su aprendizaje de la programación.
Excelente canal. Felicidades Álvaro Felipe y todo su equipo. Les descubrí hace poco pero llevo unos días visitando sus videos desde sus inicios y hay joyitas como esta. Me encanta la facilidad con la que explicas y solucionas problemas habituales del diseño web. Saludos
muchas gracias!
es la mejor explicación, más clara y con ejemplos de estas propiedades que jamás he visto. Muchísimas gracias
Hola este comentario es para agradecerte por compartir tu conocimiento y explicar siempre a detalle de el porque de las cosas
Gracias amigo por publicar tu video... ultimamente he estado realizando esto en mi trabajo, pero css es nuevo para mi. Este video me ayudo a ralizar un mejor trabajo. Gracias, Dios te bendiga!
+Francisco M. Venegas genial, me alegra!
+Francisco M. Venegas igual ya no se deberia usar float, es mucho mejor usar flexbox.
La mejor explicación en español.
excelente tu manera de explicar. La gente de platzi defiende el inline-block y en sus tutoriales usan float. Coherencia (?). Saludos desde argentina
La forma de dictar tus cursos rápidos me dan mucha confianza para poder adquirir un curso por ED, se nota que sabes enseñar, no se si me equivoque al decir que eres DIDACTA ESTUDIADO o con mucha experiencia en la enseñanza.
me encanto el video, siempre tenia esa duda de usar entre el display:inline-block y float, ya que al parecer hay una lucha constante entre estas 2 propiedades, una muy facil explicacion, gracias.
gracias Alvaro Felipe, muy bien explicado, y esta explicación me maté buscandola en internet y no la encontraba o si la encontraba no la explicaban bien y terminaba mas perdido...muchas gracias!!!
Excelente video profesor Alvaro, Muchas Bendiciones
También se pueden quitar los espacios poniendo en 0 el tamaño de fuente del elemento padre, y luego volviendo a ajustar el tamaño de fuente en los elementos hijos.
Muy buen tutorial. Ya me suscribí. :)
Sos un genio Alvaro Felipe! Felicitaciones!!
el vertical-align me salvo mi proyecto totalmente!
gracias.....
Gracias excelente video!, con la propiedad overflow podemos solucionar el excedente del contenido, ocultandolo o utilizarando un scroll o scroll auto y así poder seguir utilizando el float aun tenga un contenido excedido. Siempre y cuando asignemos un height.
Excelente!!! Tu forma de explicar es tan clara como el agua!!! Muchas gracias!
Agradecido estoy! Venía con dudas respecto a ambas opciones y ya aclaré con tu video...sobretodo con el ratico del vertical-align: top.
Saludos desde Panamá.
¿Quién es capaz de darle dislike a este vídeo? Más claro imposible la utilización de estas propiedades; Muchas gracias. Saludos. :)
Sos un campeón. Muy bueno el tutorial, te agradezco muchísimo. Me sirvió mucho. Saludos desde Argentina
SUPERRRR GENIAL¡¡¡ primera vez que estoy entendiendo, unos doss videos mas espero empezar a maquetar mi primera pagina web...
Heyy el dato del espacio que decis en los elementos line me re ayudó a enender otras cosas. Re gracias!
Saludos ! Tu vídeo es de mucha ayuda para la comunidad !!!
Genial como siempre 👍. Saludos desde México.
Excelente video muy claro y bien explicado! Exitos!
Por fin empiezo a entenderlo !! muchas gracias por tus explicaciones!!
Otro tema comprendido. Eres un profesor magnífico, gracias!
Una técnica es usar los tag de comentarios entre los "enter" o espacios de los div. ej:
....
...
jaja, amigo el final del video ha hecho que me ria bastante. Gracias por este video, me sirvió de ayuda.
Hola! Muchas veces utilizo display table. Muy buen video!
Matías Jaubet display:table es todo un tema, tiene sus ventajas y desventajas para hacer layouts. Una curiosidad de display:table es que limpia los floats hijos. Asi no se necesita de overflow:hidden.
En el minuto 2:00 usas un atajo para encerrarlo en . ¿Cómo lo haces?
+777colombe pudiste saber como hacerlo?
+Richard Castillo no... Todavia no... Ya casi rompo el teclado y nada..
Si lo encuentras me avisas, de igual manera te avisare
+Richard Castillo por supuesto Richard.
+Richard Castillo hermano, en BRACKETS el atajo es , es decir, primero selecciona todo el texto o párrafo que quieres ponerlo entre una tag, en seguida, presionas este atajo . Luego, abrirá una linea abajo parecida como las de reemplazo de texto, luego pones apenas el nombre de la tag, por ejemplo, apenas presionas P (para estar entre ). Pero, eso es EN BRACKETS, inténtalo en SUBLIME tb. Además, hay unos outros atajos en sweetme.at/2013/08/08/sublime-text-keyboard-shortcuts/
excelente amigo muy bien explicado...!!!! sigo todos tus tutoriales.....!!!!
Que suerte tengo de haber encontrado tus videos :D
Gracias Alvaro, sos muy buen docente!
Buenísima la explicaron genio me sacaste de una gran duda la verdad
Excelente manera de explicar. Gracias!
excelente explicación. Me fué muy útil, te agradezco mucho.
Excelente video. muy bien explicado . muchas gracias!
Chabon sos un capo! Gracias por el video me sirvió mucho. Un abrazo
Buenas tardes desde España y gracias por tus videos.. he visto muchos por youtube pero los tuyos son de lo mejor asi que sigue asi!.. una pregunta.. si el espaciado con margin que indicas entre cada caja tiene un 0.5%, por cada caja seria un 1% en total a los lados.. ese 1% no lo tendrian las demás cajas? no se convertiria en 3% en total.. eso me despisto!.. espero que contestes.. muchas gracias y un saludo!
Hola, cada caja tiene 32.33% + 1% (margen de 0.5% a cada lado) = 33.33% Y 33.33%*3= 99.99%. O si lo quieres ver como mencionas, es verdad, los márgenes suman en total 3%. Fijate: 32.33%*3 (columnas) = 96.99% + 3% (margenes) = 99.99%
Saludos.
Hola de nuevo.. muchas gracias por responder.. claro!.. llevas razón!.. no me percaté de que cada caja por separado tiene el ancho de 32% y no de 33%!.. por eso me extrañaba.. un lapsus! jajaja.. sigue asi! ya que nos ayudas muchisimo a los que estamos empezando en este mundo.. un saludo y a por el proximo video!
Con qué atajo de teclado haces lo del 1:58? selececionar el lorem y lo encierras con la etiqueta P sin reemplazarlo.
me gusta tu canal. bien explicado todo. gracias. me he suscrito.
muchas gracias
Me gusto el final. Gracias por el video saludos.
Gracias maestro !
gracias! no hablo espagnol, solo poco pero ai comprido todo!!!
Muchisimas gracias es un excelente video, eres todo un maestro. Me subscribo a tu canal
gracias ya que tenia ese problema con position y no podia arreglarlo lo provare y les cuento
Excelente contenido
El mejor!
Saludos, amigo. excelente aporte
consulta ¿se puede utilizar box-sizing para el body o solo es para las otras secciones? gracias
Muy bueno, Álvaro Felipe tus videos se entiendes a la perfección.
Aprovecho para consultar acerca de los menú de navegación. Qué recomiendas para los menú de navegación horizontal en el header (inline-block o float) ?
Saludos Crack!
Excelente video!!! FELICITACIONES!! Pregunta: ¿cómo hacer que todas las cajas sean del mismo alto, aunque algunas tengan menos texto? Saludos desde Uruguay.
Soy principiante, pero por ahí aprendí una técnica con Overflow: scroll, donde puedes colocarlo en el elemento que más texto tengas para que le aparezca un scroll suponiendo que le fijaste una misma altura basada en el elemento de menor altura. No sé si me expliqué...en caso de que no, puedes investigar sobre ello :D Saludos desde Panamá.
realmente, excelente la explicacion.
Graciaaaas me ayudaste mucho :3
Gracias por compartir conocimientos.
Excelente tu forma de explicar enserio de lo mejor. Buen video Thumbs up y +1 Ssucriber ;)
Excelente!!!!
que bien explicado, gracias
genial, muchas gracias tocayo!
Muchas gracias estuvo genial el tutorial :D eres de mexico????
Una pregunta como hace para agregar las etiquetas cuando selecciona el texto
Muy buenos sus video, lo felicito y gracias por compartior su experiencia...tiene algun curso de css completo?.
Que bueno que te hay agustado. Tenemos un curso compelto de CSS en esta url ed.team/css ¡Te esperamos!
Y cómo harías para colocar los elementos 1 y 3 de la primera fila, del mismo alto que el elemento 2?
muy bueno le material espero que sigas sacando mas videos me quedo claro :)
Muy bueno, me suscribo!.
Gracias!!!
Hola, Soy aprendiz: aprox: 9:50: No señor, no solo que los "bloques se pongan en linea" falta decir que en "display inline-block" además de eso ( ... de ponerse los elementos bloques en horizontal) se respeta la anchura y el alto del elemento block, mientras que en "display-inline" no. Bueno, después de todo creo que si toda la teoría que marea alrededor del tema diseño-Web sería menos árdua si se explicara más visualmente. Lamentablemente sobre esta clase de tutoriales hay pocos. Gracias.
excelente vídeo disculpa como haces para que tu pagina se actualice y cuando escribes el código se muestre en pantalla automáticamente yo utilizo el notepad++
Hola, es un programa que se llama prepros, en el curso de HTM5 Desde Cero lo vemos en clase escuela.digital/html
podrias hacer la diferencia entre display inline-blocck, float y display:flex por favor
Excelente.
Hola amigo. Necesito usar el vertical Inline-block con el vertical-align top pero necesito que los elementos que siguen abajo tambn se vayan al top quedando justo debajo del elemento que tienen arriba y no que sea relativo al que tiene la lado
+Zarith Contreras ¿???
por favor explicar que hace cada comando para poder entender las personas que no saben y están aprendiendo
Cortando los flotantes, ¿se podría arreglar?
Maestro!!!!!
Como haces eso? 1:57
grande gracias
7:40 en realidad también se puede hacer que ese linea en blanco desaparezca con display:inline-block
seria quitar el salto de linea de los div y listo xd o comentarlo
Perfecto!!!
Para solucionar el espacio que deja inline-block, es quitandole los 4px que pone por defecto en el margen derecho: margin-right:-4px.
Cual es la diferencia entre display: block y display: inline-block?
Yo utilizo más inline-block, los floats son problematicos pero bueno cada uno con sus gustos. y para eliminar el espaciado de inline-block es con la etiqueta de comentario en html: ó font-size:0 ó
En lineaYsin espacios
salvo el font-size:0 los otros metodosgeneran html sucio lo cual no es buena practica. Por otro lado, declarar font-size:0 y redeclarar el font-size para lo hijos no es más ni menos problemático que un clear o un overflow:hidden para los floats.
ó word-spacing: -.3em; y en el descendiente word-spacing:initial;
Float es problematico cuando las cajas tiene diferentes alturas. como bien mencionas en el video
#contenedor-padre{display: flex;} .... escribo eso, y me alejo muuy, muy lentamente... y ni les digo donde lo aprendí porque les da algo.... ok ok les doy pista, empieza por "plat" y termina en "zi" lol
Mario Rebollo Bravo Este video no es sobre flexbox por lo que no se lo menciona. La proxima semana subiré un video sobre flexbox que estoy preparando. Esperalo. Aprenderás mucho. Más de lo que aprendiste y sin regalar dinero =)
Escuela Digital Ok ok.. ya lo miraremos, saludos
Crack
De que pais es este youtuber? Mexicano?
Me parece es de Peru.
Aquí aprendiendo float habiendo flex-box y grid
13:40
Cada palabra tiene espacio porque la.das espacio con la.barra espaciadora, no porque cada palabra sea un elemento inline... O no entendí que quisiste decir.
Algo q me molesta y mucho de los programación es q cambian mucho de jerga del español al inglés cuando usan términos q obviamente están en inglés x su programación.
Ríete e su cara... jaja me hizo reír
width: 49%;/*49,5% entran los 3 en linea*/
practicamente un tutorial de como crear el efecto masonry eeeje
ya saqué el pajarito XD