comments 9

Curso de programación web desde cero: Clase 5

(Lo lees en 18:20)

En las dos próximas clases del curso de programación web desde cero de Incoming Startup, vamos a terminar de ver el modelo de caja. La clave para entender la maquetación web.

Ya hemos hablado de márgenes externos, margin, y de márgenes internos, padding (puedes recordarlo aquí). También hemos visto cómo dimensionar un elemento de caja dándole ancho y alto con height y width (puedes repasarlo aquí).

Nos faltan dos conceptos vitales. Y remarco lo de vitales, porque de no entenderlos pasarás horas y horas probando y frustrándote por cómo se comportan los elementos de tu maquetación.

Estos dos conceptos son: display y position. Ambos son dos elementos que, por no comprenderlos, confunden a muchos desarrolladores web.

La propiedad “Display”

Nada como pasarte horas probando de todo para que un elemento de tu página se coloque donde tu quieras sin destrozar todo lo demás.
Y cuando finalmente lo consigues, ir con miedo para no estropearlo todo.

No te preocupes, le vamos a poner remedio entendiendo el modelo de caja a la perfección con ésta y la próxima clase.
Hoy le toca el turno a display.

Display: block, inline e inline-block

Como ya hemos comentado en clases anteriores, un elemento HTML es una caja rectangular. Pues bien, la propiedad de CSS “display” es la que determina como se comporta esa caja rectangular con los elementos que tiene alrededor.

Este atributo es importante comprenderlo porque “altera” el comportamiento de los margin y padding, y porque va a ser nuestro principal aliado a la hora de maquetar nuestros proyectos.

1.-Display block:

Antes de empezar a ver los diferentes valores para este atributo CSS, vamos a comenzar viendo algo de código.

Creamos un index.html con la estructura básica que ya conocemos de anteriores clases. Le enlazamos un style.css y le añadimos antes nuestro normalize.css. Si no sabes como hacerlo, consúltalo en la clase anterior.

Ahora en nuestro body creamos un section, por ejemplo, y en la hoja de estilos le damos un fondo de color rojo y una altura de 50px. Sabemos hacerlo todo ¿verdad?

Se tiene que quedar algo así:

Nuestro index.html

Nuestro index.html

Nuestro style.css quedaría así

Nuestro style.css quedaría así

Así se ve nuestro section

Así se ve nuestro header

Como puedes ver, sin que nosotros indiquemos nada al section, éste, ocupa todo el ancho del navegador. No le hemos indicado que ocupe el 100% del ancho, y no le hemos fijado ningún valor.
Además, si cambiamos el ancho de la ventana del navegador, se ajusta, no se desborda, no sale la barra de scroll horizontal.

Ahora fíjate bien:
Si le añado un width del 50%, se ajusta a la mitad de la pantalla del navegador.

CSS:

width: 50%;
Nuestra caja al 50%.

Nuestra caja al 50%.

Si ahora creamos un div, con un background de color azul, al mismo nivel jerárquico, con un width del 50%, con altura de 50 px debería ponerse al lado, cierto?

HTML:

<div class="caja-azul"></div>

CSS:

.caja-azul{
  background: blue;
  height: 50px;
  width: 50%;
}
Nuestras cajas al 50%. La azul debajo....

Nuestras cajas al 50%. La azul debajo….

Pues no. Se coloca debajo. De hecho, por mucho que agrandes la pantalla del navegador, sigue el div azul debajo del section rojo. ¿Porqué ocurre esto?
Muy sencillo, porque tanto section como div, tienen por defecto, la propiedad display : block;

Vamos a analizar estos elementos con ayuda del inspector del navegador:

Display block en acción

Display block en acción

Como puedes ver, a pesar de que le indicamos al section un ancho del 50%, el margin, en color naranja mostrado por el inspector, ocupa toda la pantalla. Eso es lo que hace el display de tipo block, hace que nada pueda colocarse al lado de nuestro elemento.
Muchos elementos de html tienen por defecto el display como block, por ello cuando comenzamos a crear nuestro html y visualizamos el navegador, generalmente se van apilando uno encima de otro.

Esto que a priori puede parecer un fastidio, en realidad es genial, ya que nos permite asignar a un elemento que siempre ocupe la totalidad del ancho de la pantalla, lo cual para un diseño elástico y responsive es muy bueno, y es lo que buscamos como desarrolladores web de hoy.

Con display block, ya no necesitas asignar un ancho determinado a un elemento, siempre ocupará el 100%, y lo que es mejor, cuando los elementos se adapten, no “penetrarán” en esta zona, serán empujados hacia abajo.

Por ejemplo, si tenemos una barra de navegación o un header horizontal, si le colocamos un display block nos ocupará siempre la totalidad del ancho de la pantalla, independientemente del tamaño que ésta tenga, no tenemos que fijarle ningún valor ni preocuparnos por ello. También nos aseguramos de que ningún elemento html que haya debajo, invada o penetre en esta zona, destrozando nuestra maquetación.

Inspeccionando la web de twitter

Inspeccionando la web de twitter

Algunos de los elementos html que por defecto tienen la propiedad display en block son: div, header, figure, section, article, nav, p, h1,etc.

2.- Display: inline-block:

Otro de los valores que le podemos asignar a display es inline-block.
Para que sea más gráfico voy a cambiar los width: el section al 20% del ancho, y el div de clase caja-azul lo mantenemos al 50%.

La caja azul ahora sí está al lado

La caja azul ahora sí está al lado

Inspeccionando nuestros elementos

Inspeccionando nuestros elementos

Como puedes ver, ahora sí están uno al lado del otro. Con display inline-block, nuestros elementos se colocan en línea, y se ajustan al ancho que le hemos dado o al contenido que tienen en su interior si no le hemos asignado un ancho predeterminado, por ejemplo, vamos a quitar los anchos y a poner algo de texto.
Para ello colocamos un p en el interior de nuestros elementos, y solo para darle más legibilidad le damos un color blanco al texto en nuestro CSS. Para esto último usamos la propiedad color:

HTML:

  <section>
    <p>Algo de contenido en section</p>
  </section>
  <div class="caja-azul">
    <p>Algo de contenido en nuestra caja azul</p>
  </div>

CSS:

p{
  color: white;
}
Nuestras cajas con contenido en color blanco.

Nuestras cajas con contenido en color blanco.

Como puedes ver, ahora nuestros container se ajustan al ancho que tiene el contenido.

Lo que ocurre con el contenido cuando no cabe.

Lo que ocurre con el contenido cuando no cabe.

Pero fíjate en la verdadera magia del display:inline-block; cuando el contenido no cabe, nuestra caja azul se coloca debajo de nuestro section rojo. Lo cual hace que nuestros diseños sean elásticos y se adapten al ancho de la ventana, siempre.

Diseño elástico con display.

Diseño elástico con display.

Por cierto, como puedes ver, entre ambos elementos hay un pequeño margen molesto de unos 5 px. Esto se debe a que el valor inline-block de la propiedad display adquiere atributos de texto, como el interletrado, y eso es lo que está ocurriendo, se crea un espacio de interletrado entre ambas cajas. Para eliminarlo podemos asignar un font-size: 0 al contenedor padre, es decir, a section, y luego asignar un font-size a nuestros contenedores hijos p, o basta con colocar un margin en la caja azul:

CSS:

margin-left: -5px;

Yo no soy partidario de márgenes negativos, así que te recomiendo usar la primera.

Ya no hay margen de interletrado.

Ya no hay margen de interletrado.

Por supuesto, nuestros elementos en inline-block pueden tener márgenes.

3.- Display inline:

Otro valor de display es inline. En este caso está muy enfocado con los objetos de texto o que se van a relacionar con texto. Algunos elementos que por defecto son inline: video, img, span, etc.

Los elementos que tienen display inline no tienen margen superior e inferior y gracias a esto no rompen un bloque de texto.

Imagina que queremos modificar el estilo de una palabra dentro de un párrafo tal y como hicimos en nuestra primera clase. Si utilizáramos un div para poder seleccionar la palabra que queremos darle estilo, el bloque de texto se rompe, porque el div tiene display: block, y por tanto empuja todo el contenido que le rodea a la zona inmediatamente inferior.

HTML:

  <section class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat deleniti quibusdam aliquid nesciunt animi. Voluptatibus, obcaecati deserunt 
fuga
provident sequi dignissimos, delectus alias reiciendis minus veritatis placeat. In, totam, animi?</p> </section>
Nuestro contenido html

Nuestro contenido html

CSS:

.fondo-rojo{
  background: red;
}
Nuestro texto se ha roto por un div con display block

Nuestro texto se ha roto por un div con display block

Sin embargo, si en lugar de un div, usamos span, que es un elemento que tiene display inline por defecto, no se rompe el bloque de texto:

HTML:

<span class="fondo-rojo">fuga</span>
Nuestro contenido con span, que tiene display inline.

Nuestro contenido con span, que tiene display inline.

Por eso se suele decir que un span es como un div pero para textos.
Otros elementos inline son modificadores de texto como strong, que convierte el texto en negrita o em, que convierte el texto en cursiva o itálica.

Strong, em, span. Todas con display inline.

Strong, em, span. Todas con display inline.

Los elementos inline no solo no aceptan altura y ancho. Al aplicar margin o padding no empujan verticalmente ningún elemento del texto. Por ejemplo, si le aplicamos a nuestra clase un margin y un padding:

CSS:

.fondo-rojo{
  background: red;
  padding: 30px 30px;
  margin: 30px 30px;
}
Nuestro span con margin y padding no rompe la línea, solo empuja el contenido horizontalmente.

Nuestro span con margin y padding no rompe la línea, solo empuja el contenido horizontalmente.

Resumiendo, los display inline, block e inline-block, lo usamos para maquetar elementos que están en la misma línea, y para controlar cómo se relacionan entre ellos.

“Floatero” el último: porqué no usar float para maquetar

Si acabas de empezar con programación web, déjame advertirte sobre algo. Verás con el tiempo tutoriales, artículos en blogs, ejemplos, proyectos o incluso compañeros que usan la propiedad float para maquetar elementos en línea, para crear una malla o cuadrícula de elementos apilándolos hacia la izquierda con float: left. Pues bien: JAMÁS, jamás lo uses para maquetar.

Si ya llevas tiempo y lo has usado o aún peor, lo sigues usando: por favor, no te hagas esto, déjalo, ese float te está provocando el 90% de problemas en tu maquetación.

Estás usando para maquetar una propiedad que no sirve para maquetar hoy día. Un float usado para maquetar es un nido de bugs.
Ese float es como meter a alguien con problemas graves de comportamiento en una fiesta para pijos: tarde o temprano te la va a liar.

El float sirve para que un texto abrace y rodee una imagen. Tu tienes tu imagen, y le dices al texto que flote alrededor de ella.
No nos sirve para poner un objeto flotando a la derecha y otro flotando a la izquierda, porque para esto debemos usar display table o display flex, o incluso con position (lo veremos en las próximas clases).
Pero jamás ha servido para ordenar elementos en una línea o para crear una cuadrícula.

Lo que float hace es eliminar los márgenes de un elemento y obligarlo a flotar hacia uno de los márgenes.

Aunque no servía para maquetar, hasta el año 2007, donde todo lo teníamos más controlado con resoluciones más estándar, cuando no existía la necesidad de diseños elásticos o responsive design, el float podría ser resultón, y podría funcionar.

Pero hoy día no podemos colocar elementos que no saben comportarse con los demás. Porque eso es lo que ocurre con float, colocamos a una serie de elementos flotando uno al lado del otro, pero que no saben cómo relacionarse con el resto de elementos, y el resto de elementos no sabe como relacionarse con ellos, y cuando tienden a moverse o adaptarse a otro tipo de pantalla se lía parda. Elementos que montan por encima a otros, que pierden sus márgenes,etc.

Además con float, a diferencia de lo que ocurre con display, que realmente se creó para maquetar linealmente los elementos, no podemos controlar las alturas de las cajas, ni alinearlo con nada, ni centrarlo. Además, según como lo usemos nos puede incluso cambiar el orden del marcado html.

Pero no te preocupes. Una vez terminemos nuestras clases sobre el modelo de caja, ya no necesitarás maquetar con float jamás.

Vamos a hacer un par de ejercicios o casos prácticos usando valores de display para ir asentando conocimientos.

Ejemplo práctico 1: Un menú de navegación horizontal

Vamos a crear un pequeño menú de navegación horizontal con cuatro elementos. Un elemento que aparece casi en la totalidad de las web que te encuentras. Así de paso aprovechamos para repasar algunos conceptos que ya hemos visto anteriormente como padding y margin.

Las listas en HTML

Para los elementos de menú y de navegación generalmente se usan listas. Una lista es un grupo de elementos que pueden estar ordenados o no. Por ello podemos distinguir dos tipos de listas: la lista ordenada ol y la lista desordenada ul.

Tal y como puedes ver en la imagen, la única diferencia entre ambas, es que una lista ordenada, tiene los elementos que la componen con un número asignado, mientras que la lista desordenada, cada elemento tiene un guión o un punto.

Nuestro html con dos tipos de listas.

Nuestro html con dos tipos de listas.

Nuestras dos listas en el navegador.

Nuestras dos listas en el navegador.

Los menús de navegación, como ya sabes, se crean dentro de una etiqueta semántica nav.

Los diferentes elementos del menú se crean mediante una lista. En concreto una ul.
Dentro de una ul, se colocan elementos li, uno por cada elemento que forma la lista, tal y como muestra el siguiente código:

Nuestro html con el nav y la lista.

Nuestro html con el nav y la lista.

CSS:

nav{
	border: solid 1px olive;
}
Nuestra lista en el navegador.

Nuestra lista en el navegador.

Como puedes ver, hemos utilizado la propiedad border para delimitar nuestra caja nav, cuyo valor de display es block, al igual que cada elemento de la lista, por eso ocupan toda la pantalla del navegador.

Inspeccionando la ul.

Inspeccionando la ul.

Los márgenes y padding por defecto. Siempre a tenerlos en cuenta.

Como puedes ver, si inspeccionamos la lista con las herramientas de desarrollador del navegador, podemos observar que, sin nosotros aplicarle un margin o un padding a la lista, ésta ya tiene por defecto un margin superior e inferior, señalado en naranja, y un padding left, señalado en verde.

Y es que hay muchos elementos que por defecto traen una serie de márgenes que debemos conocer y tenerlos en cuenta al maquetar, para eliminarlos si queremos y lo necesitamos.

Por ejemplo, un párrafo p es un div normal, pero con un margen superior e inferior, y con un display block por representar un bloque de texto. Nosotros podemos eliminar o modificar esos márgenes.

Un caso muy curioso es el que ocurre con la etiqueta semántica figure. Esta etiqueta la usamos para indicarle al navegador y a Google, que en su interior hay una imagen, que etiquetamos con img. Lo curioso es que img tiene el display: inline, mientras que figure, tiene el display block y añade márgenes alrededor de nuestra img. Es decir, a efectos de maquetación, un figure cambia totalmente el comportamiento de nuestro img y deberás tenerlo en cuenta en tus maquetaciones. Pero todas estas cosas se aprenden poco a poco y practicando mucho.

Volviendo a nuestro ejemplo, de lo que tenemos ahora mismo, a lo que queremos llegar, que es un menú de navegación horizontal, quedan algunas cosas que tenemos que hacer.

La primera, y que no tiene demasiado que ver con esta clase, pero que es algo que tendrás que hacer muchísimo es eliminar esos puntos decorativos de la lista.

Estos elementos decorativos los crea el navegador cuando renderiza una ul mediante la propiedad list-style. Para eliminarlo basta con asignarle el valor de “none”. Para aplicarlo tenemos que seleccionar el elemento semántico o selector al cual queremos cambiar el atributo, en este caso la ul, por ello creamos esta regla css:

CSS:

ul {
	list-style: none;
}
Nuestra lista ul sin los puntos decorativos.

Nuestra lista ul sin los puntos decorativos.

Una vez eliminadas las decoraciones de la lista tenemos que cambiar la disposición de la lista, de vertical a horizontal.
Para ello, como sabemos que los elementos de la lista se muestran en vertical por que display es por defecto block, lo que tenemos que hacer es colocar los elementos de la lista como display: inline-block.

Para crear en CSS una regla que afecte a los elementos li que están dentro de una ul, tenemos que crear el selector de la siguiente manera “ul li”:

CSS:

ul li{
	display: inline-block;
}
Los elementos de nuestro menú ya están en horizontal.

Los elementos de nuestro menú ya están en horizontal.

Ahora nos interesa separar un poco los elementos del menú para darle legibilidad. Al igual que hemos hecho antes, vamos a crear un recuadro en la caja que forma cada li por ver gráficamente lo que vamos haciendo. Para ello, en nuestra regla “ul li” le colocamos un borde:

CSS:

ul li{
	display: inline-block;
	border: solid 1px red;
}
Aplicamos un border a nuestros li para ver con claridad lo que estamos haciendo.

Aplicamos un border a nuestros li para ver con claridad lo que estamos haciendo.

Lo que queremos es separar los elementos, por lo tanto, podemos usar margin para empujar los elementos que hay alrededor de cada elemento de li.
Podemos separar lateralmente cada elemento, para ello podemos usar la definición de atributo de dos elementos, que tal y como vimos en clases anteriore, el primer parámetro es el valor que asignamos para el margin-top y margin-bottom, y el segundo parámetro se asigna a margin-right y margin-left.

CSS:

ul li{
	display: inline-block;
	border: solid 1px red;
	margin: 0 20px;
}

Si queremos hacer la caja de cada li un poco más grande, por cualquier motivo, como colocar un background como si fuera un botón, o diferentes aspectos estéticos, solo tenemos que aplicarle un padding interno. En este caso vamos a probar a colocar un padding de 5 px a cada li por todos los lados de la caja.
Para ello basta con una definición de atributo de un elemento, y se aplicará a todos, top, right, bottom y left:

CSS:

ul li{
	display: inline-block;
	border: solid 1px red;
	margin: 0 20px;
	padding: 5px;
}

figura28-li-con-padding

Si además queremos que salgan centrados en nuestra ventana, sólo tenemos que añadir una propiedad a nuestro contenedor principal, en este caso el nav, que es:

CSS:

text-align: center;
Nuestros elementos de menu colocados.

Nuestros elementos de menu colocados.

Ejemplo Práctico 2: Creando contenido por bloques con display

En este ejemplo rápido vamos a crear una malla de tres bloques, maquetada íntegramente sin usar float :P.

En primer lugar vamos a crear un header superior, al que le daremos un color, y simulará la parte superior de nuestra maqueta web.
Este header queremos que siempre ocupe el 100% de nuestra maquetación.

Debajo, vamos a poner 3 cajas con color y contenido, formando una línea, de forma que siempre queden centradas y doten a nuestra maqueta de cierta elasticidad cuando del display sea menor. Aunque recuerda que el diseño responsive y elástico lo veremos más adelante es importante que vayamos viendo el sentido al diseño elástico.

El header

Vamos a crear un header con h2 que ponga un título. Le vamos a dar un fondo gris para que sea visible y nos ayude a visualizar el display que tiene. Al contenido h2 le vamos a dar color blanco para que sea más legible sobre el fondo gris. También vamos a centrarlo. Sabemos hacerlo todo, ¿cierto?:

Nuestro html con nuestro header.

Nuestro html con nuestro header.

CSS:

header{
  background: gray;
  color: white;
  text-align: center;
}
Nuestro header en el navegador

Nuestro header en el navegador.

Márgenes por defecto en todas partes, hasta en un h2...

Márgenes por defecto en todas partes, hasta en un h2…

No me gusta el margen superior que tiene nuestro header. Al inspeccionarlo comprobamos que el h2 que hemos utilizado para el contenido, tiene un margen superior e inferior por defecto. Se lo quitamos.

CSS:

header h2{
  margin: 0;
}
Nuestro header a nuestro gusto.

Nuestro header a nuestro gusto.

Ahora mucho mejor. Vemos como el header, tiene por defecto display block, ocupando todo el ancho del navegador. Hemos eliminado los márgenes por defecto que tenía nuestro h2, y tenemos la zona superior de nuestra maqueta tal y como queríamos.

Maquetando los 3 bloques

Vamos a crear un section donde ubicaremos nuestros tres bloques. Semánticamente tendríamos esto:

Nuestro html con el section y los bloques.

Nuestro html con el section y los bloques.

Como puedes ver les he añadido una serie de clases para poder darles estilo luego.
He creado una sección con section, le he añadido un título con un h3 (que seguro tendrá márgenes por defecto), y he creado las 3 cajas con div. Ahora vamos con el CSS.

Lo primero que quiero hacer es separar mi section con mi header para que no estén juntos, pero como el h3 ya tiene unos márgenes por defecto, los dejo tal cual para que ambos estén separados.

Como quiero que las tres cajas estén alineadas y centradas, lo primero que hago es aplicarle un text-align: center al contenedor padre section:

CSS:

section {
  text-align: center;
}

Y ahora le doy estilo a la clase .caja que he creado. Para ello voy a darle un color naranja, y como quiero que estén una al lado de la otra, le doy el valor inline-block a display. Para separarlas visualmente del texto interior de la caja y darle mayor ancho a cada una de ellas les doy un padding, aprovecho y les doy altura para visualizar bien el fondo naranja.
Y como quiero que sea un diseño elástico, y quepan las 3 cajas, les doy un 30% de ancho:

CSS:

.caja{
  display: inline-block;
  background: orange;
  padding: 50px 10px;
  width: 30%;
}

Esta es mi maquetación final. Mira lo que ocurre cuando el tamaño del display no deja que se vea el contenido del interior de nuestra caja, en este caso el texto:

Nuestra maquetación elástica. Y sin floats! :)

Nuestra maquetación elástica. Y sin floats! :)

Exacto, se va adaptando de forma elástica hasta que no puede mostrar el contenido de las tres cajas, entonces baja la que no cabe y la centra, gracias al text-align center.

One more thing: el display none

La propiedad display tiene muchos valores. Además de los que hemos visto en la clase de hoy, inline, inline-block y block, y de los próximos que vamos a ver, table y flex, existe el valor de display: none;
Este valor lo que hace es que la caja que tenga ese valor de display no se visualice. Se hace invisible.
Es muy utilizado en diseño responsive, ya que podemos ocultar elementos de diseño que no son necesarios o relevantes en pantallas más pequeñas usando este valor.

Conclusión:

Los tres tipos de display lineal.

Los tres tipos de display lineal.

Resumiendo, display es fundamental en maquetación porque con el indicamos el comportamiento que tiene que tener un caja con respecto a su entorno. Dejemos float para su verdadero uso.

Las próximas clases hablaremos de position, de display table, de display flex y ya estaremos preparados para cualquier maquetación y para empezar con responsive design.

Post Relacionados:

Clase 0, Introducción al curso.
Clase 1, Tu primera web app.
Clase 2, HTML 5.
Clase 3, Maquetación web básica.
Clase 4, Id, clases y normalize.

Clasificado como: Código

Sobre el autor

Escrito por

Me llamo Francisco Gallardo , y soy diseñador de productos de software, mobile y web. Soy diseñador de UX, de interfaces y desarrollador web y iOS.

9 Comentarios

  1. Manuel

    Buenas, antes que nada felicitarte por el curo.

    Tengo un problema con “inline-block”.
    En el primer ejemplo, pongo ese código en el css dentro del section, pero se me queda el div en la parte de abajo.

    Este es mi css:

    section{
    display: inline-block;
    background: red;
    height: 50px;
    width: 20%;
    }

    .caja-azul{
    background: blue;
    height: 50px;
    width: 50%;
    }

    y el HTML;

    Clase 5

    Que estoy haciendo mal??

  2. FranciscoJGallardo

    Hola Manuel!

    Por defecto, un div tiene el display como block. Eso hace que ocupe el 100% de la pantalla y no deja que ningún elemento se coloque a su lado.
    Si te fijas en tu código, no has asignado ningún valor al atributo display de tu clase “caja-azul”, y por lo tanto su display es block (haz la comprobación inspeccionando el elemento desde el navegador. Si le asignas a la “caja-azul” un display: inline-block se colocará junto a tu caja roja ocupando el 50% de la pantalla:

    Recuerda siempre que por defecto el atributo display es block a no ser que le asignemos un valor distinto.

    Un saludo!!

  3. Manuel

    Ok muchas gracias, efectivamente era eso.
    Ahora lo que no consigo es quitar el margen entre los elementos usando font-size: 0.
    He probado con esto:

    section{
    display: inline-block;
    background: red;
    height: 50px;
    font-size: 0;
    }

    .caja-azul{
    display: inline-block;
    background: blue;
    height: 50px;
    }

    p{
    font-size: 15px;
    color: white;
    }

    Pero me sigue quedando un margen
    Si uso lo de los márgenes negativos me funciona bien.

  4. FranciscoJGallardo

    Hola Manuel,

    A mí los valores negativos no me convencen mucho, aunque como todo, es cuestión de gustos.
    Yo prefiero usar el font-size: 0;

    Cuando eliminamos el interletrado (el espacio entre letras) que es lo que produce ese efecto no deseado, tenemos que asignar el font-size del objeto padre del contenedor a 0.

    En tu caso, el objeto padre del contenedor al que quieres afectar es body.
    Por tanto, en la parte superior de tu archivo de estilos tienes que poner la siguiente regla:

    body{
    font-size: 0;
    }

    Un saludo!

Leave a Reply