Propiedades CSS: Inline block vs Float

[@juancarlosmartinjimenez3088]

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

[@leafxlyn]

Han pasado ya 4 años. Me pregunto como le habrá ido a usted en su aprendizaje de la programación.

[@albaberna1408]

es la mejor explicación, más clara y con ejemplos de estas propiedades que jamás he visto. Muchísimas gracias

[@superlativo4420]

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

[@EDteam]

muchas gracias!

[@diegolopezcuentas5979]

La mejor explicación en español.

[@pedrogm91]

Hola este comentario es para agradecerte por compartir tu conocimiento y explicar siempre a detalle de el porque de las cosas

[@lucasgutierrez958]

excelente tu manera de explicar. La gente de platzi defiende el inline-block y en sus tutoriales usan float. Coherencia (?). Saludos desde argentina

[@peruvianException]

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.

[@albertopadilla4764]

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.

[@wilsonsalinas3881]

el vertical-align me salvo mi proyecto totalmente! gracias.....

[@mauroex8078]

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.

[@TheMenyDude]

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!

[@EDteam]

+Francisco M. Venegas genial, me alegra!

[@TheMessixaviniesta]

+Francisco M. Venegas igual ya no se deberia usar float, es mucho mejor usar flexbox.

[@boolixful]

¿Quién es capaz de darle dislike a este vídeo? Más claro imposible la utilización de estas propiedades; Muchas gracias. Saludos. :)

[@JavierPortillo1]

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í. :)

[@jairoverachaly6248]

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!!!

[@elflaco3375]

Excelente video profesor Alvaro, Muchas Bendiciones

[@5238enas]

Excelente!!! Tu forma de explicar es tan clara como el agua!!! Muchas gracias!

[@albertoacosta5704]

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á.

[@OficinasSuipa]

Sos un genio Alvaro Felipe! Felicitaciones!!

[@metaforaenlinea501]

SUPERRRR GENIAL¡¡¡ primera vez que estoy entendiendo, unos doss videos mas espero empezar a maquetar mi primera pagina web...

[@arielsopranzi]

Sos un campeón. Muy bueno el tutorial, te agradezco muchísimo. Me sirvió mucho. Saludos desde Argentina

[@panchamoliner4172]

Por fin empiezo a entenderlo !! muchas gracias por tus explicaciones!!

[@ampzac]

Otro tema comprendido. Eres un profesor magnífico, gracias!

[@paullima-peru1225]

Con qué atajo de teclado haces lo del 1:58? selececionar el lorem y lo encierras con la etiqueta P sin reemplazarlo.

[@maleeme836]

Heyy el dato del espacio que decis en los elementos line me re ayudó a enender otras cosas. Re gracias!

[@OscarRamirez-mk6es]

Genial como siempre 👍. Saludos desde México.

[@carlosalfredovelasquezferr6824]

Excelente video muy claro y bien explicado! Exitos!

[@Alexyslozada]

Una técnica es usar los tag de comentarios entre los "enter" o espacios de los div. ej: .... ...

[@Jaubet]

Hola! Muchas veces utilizo display table. Muy buen video!

[@EDteam]

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.

[@luisreyes3472]

Saludos ! Tu vídeo es de mucha ayuda para la comunidad !!!

[@777colombe]

En el minuto 2:00 usas un atajo para encerrarlo en . ¿Cómo lo haces?

[@rOxhhh]

+777colombe pudiste saber como hacerlo?

[@777colombe]

+Richard Castillo no... Todavia no... Ya casi rompo el teclado y nada..

[@rOxhhh]

Si lo encuentras me avisas, de igual manera te avisare

[@777colombe]

+Richard Castillo por supuesto Richard.

[@777colombe]

+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/

[@ricardoortizcalistenia]

excelente amigo muy bien explicado...!!!! sigo todos tus tutoriales.....!!!!

[@dodgewagen]

Excelente manera de explicar. Gracias!

[@AlfonsoLopezJimenez]

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!

[@EDteam]

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.

[@AlfonsoLopezJimenez]

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!

[@gabrielfeldman6781]

Gracias Alvaro, sos muy buen docente!

[@geras2009geras2009]

Que suerte tengo de haber encontrado tus videos :D

[@xjbs9540]

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!

[@arielsopranzi]

excelente explicación. Me fué muy útil, te agradezco mucho.

[@D4RKD3M0N6666]

Excelente video. muy bien explicado . muchas gracias!

[@electronoscar7277]

consulta ¿se puede utilizar box-sizing para el body o solo es para las otras secciones? gracias

[@Ariel-wj1jn]

Chabon sos un capo! Gracias por el video me sirvió mucho. Un abrazo

[@JuegosHolaQueTal]

Buenísima la explicaron genio me sacaste de una gran duda la verdad

[@cardanviera]

Excelente video!!! FELICITACIONES!! Pregunta: ¿cómo hacer que todas las cajas sean del mismo alto, aunque algunas tengan menos texto? Saludos desde Uruguay.

[@albertoacosta5704]

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á.

[@marcelofaviodesigner]

me gusta tu canal. bien explicado todo. gracias. me he suscrito.

[@mauriciocba9]

Gracias maestro !

[@manenajulito4169]

Me gusto el final. Gracias por el video saludos.

[@javierpedrera1231]

jaja, amigo el final del video ha hecho que me ria bastante. Gracias por este video, me sirvió de ayuda.

[@wilsonsalinas3881]

muchas gracias

[@themeanspeak]

gracias! no hablo espagnol, solo poco pero ai comprido todo!!!

[@hecmen84]

Y cómo harías para colocar los elementos 1 y 3 de la primera fila, del mismo alto que el elemento 2?

[@franciscoadpadilla3697]

gracias ya que tenia ese problema con position y no podia arreglarlo lo provare y les cuento

[@sergiocapacho2251]

Muy buenos sus video, lo felicito y gracias por compartior su experiencia...tiene algun curso de css completo?.

[@EDteam]

Que bueno que te hay agustado. Tenemos un curso compelto de CSS en esta url ed.team/css ¡Te esperamos!

[@JuanDavid-vr6dt]

Una pregunta como hace para agregar las etiquetas cuando selecciona el texto

[@dianasofia7430]

Muchas gracias estuvo genial el tutorial :D eres de mexico????

[@666Sarry]

El mejor!

[@sakitex1057]

Excelente contenido

[@musicplanet06]

podrias hacer la diferencia entre display inline-blocck, float y display:flex por favor

[@PedroArnoldoMachadoDuran]

Muchisimas gracias es un excelente video, eres todo un maestro. Me subscribo a tu canal

[@sebastianzapata4539]

Para solucionar el espacio que deja inline-block, es quitandole los 4px que pone por defecto en el margen derecho: margin-right:-4px.

[@j.villasmil9575]

Como haces eso? 1:57

[@antoniorandisi3009]

Saludos, amigo. excelente aporte

[@Saiyan2099]

Graciaaaas me ayudaste mucho :3

[@KennitRuzRomero]

Cortando los flotantes, ¿se podría arreglar?

[@alvarohrv]

genial, muchas gracias tocayo!

[@djsilvab]

realmente, excelente la explicacion.

[@crespopedia]

que bien explicado, gracias

[@tearsinrain2049]

Excelente!!!!

[@Joyvelfilmmaker]

Gracias por compartir conocimientos.

[@GerardoArambuloAncco1991]

Excelente tu forma de explicar enserio de lo mejor. Buen video Thumbs up y +1 Ssucriber ;)

[@j.villasmil9575]

Cual es la diferencia entre display: block y display: inline-block?

[@compuluismipc4520]

por favor explicar que hace cada comando para poder entender las personas que no saben y están aprendiendo

[@zarithsoccer]

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

[@EDteam]

+Zarith Contreras ¿???

[@cristiancanessa]

Maestro!!!!!

[@pablocanariotejeda8089]

grande gracias

[@jcare07]

Excelente.

[@francogiron7641]

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

[@rebecarueda1881]

Gracias!!!

[@jesus01845]

Muy bueno, me suscribo!.

[@percyleon5261]

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++

[@EDteam]

Hola, es un programa que se llama prepros, en el curso de HTM5 Desde Cero lo vemos en clase escuela.digital/html

[@joseluisgarcia-j.3826]

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.

[@deiviscastro2750]

muy bueno le material espero que sigas sacando mas videos me quedo claro :)

[@juliovilca5822]

Perfecto!!!

[@joelacosta7151]

Aquí aprendiendo float habiendo flex-box y grid

[@Machin3GUNZ]

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

[@EDteam]

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.

[@Machin3GUNZ]

ó 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

[@mariorebollobravo3583]

#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

[@EDteam]

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 =)

[@mariorebollobravo3583]

Escuela Digital Ok ok.. ya lo miraremos, saludos

[@ARY8919]

Crack

[@victorsandoval6145]

13:40

[@djsperusac]

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.

[@mendezv2001]

De que pais es este youtuber? Mexicano?

[@oscardiaz9170]

Me parece es de Peru.

[@jorgebourn7805]

width: 49%;/*49,5% entran los 3 en linea*/

[@marcelofaviodesigner]

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.

[@alejandrotaboada9371]

Ríete e su cara... jaja me hizo reír

[@drummersolis412]

ya saqué el pajarito XD

[@RetroCode0011100100110111]

practicamente un tutorial de como crear el efecto masonry eeeje