¿Alguien podria explicarme por qué se crea ese espacio adicional (¿Y donde esta?) a la derecha del primer elemento p? Porque la explicacion del curso realmente no la entiendo
Styling the
pelements asinline-blockand placing them on separate lines in the code creates an extra space to the right of the firstpelement, causing the second one to shift to the next line. One way to fix this is to make eachpelement’s width a little less than50%.
No estoy seguro de a que te refieres
¿Cuál es el link del reto?
Existen elementos:
inline-elements (elementos en línea): solo toman el espacio que necesitan
block elements (elementos en bloque): Toman todo el reglón
Toma como ejemplo la imagen, el espacio de cada elemento es el cuadro blanco.
Los elementos “inline” solo utilizan el espacio necesario para que quepa su contenido
los elementos de bloque utilizan todo el renglón y hacen que los elementos salten al otro renglón aunque aun haya espacio.
Espero que esto haya sido lo que preguntabas, para leer más sobre esto puedes buscar “box model” o “modelo de caja”
Me refiero al paso 40: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-40
Pude resolver el ejercicio, pero sin entender el porque sea crea el mencionado espacio adicional
Hola @EHX_SmallStone ,
Ya hiciste el paso 41?
Si… Mi confusion se debe a que no sabia que los elementos < p > convertidos a elementos en linea escritos en distintas lineas de codigo creaban un espacio entre si
Puedes leer mas de esto buscando información sobre “model box”
Son dos elementos “p” si cada uno toma un espacio de 50%, en total los dos ocuparía 100% y cabrían bien, pero digamos que cada elemento tiene un margen de 1% por defecto, entonces cada elemento estaría ocupando un espacio de 51%, lo cual suma 102%, por lo tanto, uno de los elementos se mueve a la siguiente línea.
Ahora, si en lugar de 50% le damos 49% sumarian 98% y tendrían espacio para un 1% extra.
Cada elemento tiene un borde, margen, padding, etc. que se tiene que tomar en cuenta al momento de jugar con las dimensiones
No, no es el caso. Si te fijas en el paso 39, puedes ver que entre el nombre del Cafe “French Vanilla” y su precio “3.00” esta el mencionado espacio adicional el cual no es un margin ni un padding, es un espacio de texto… No sabia que escribir dos elementos < p > en distintas lineas de codigo creaba un espacio de texto.
En el paso 41 puedes ver como el espacio sigue existiendo, el cual se soluciona escribiendo los dos elementos < p > en la misma linea de codigo.
Entiendo y ya conocia el “model box” los cuales vienen con valores predeterminados en cada elemento, pero yo no sabia que escribir los elementos en distintas lineas de codigo (o al menos el elemento de parrafo) creaba esos espacios adicionales interfiriendo en el diseño CSS, y por eso no entendia esos ejercicios…