En la mayoría de los casos, hay Cosas CSS que no ocupan espacio, cuando coloca un elemento en la página en su marcado, si no especifica ningún estilo especial, ocupará exactamente el mismo espacio que parece ocupar visualmente.
En otras palabras, si coloca un cuadro con un tamaño de 200 px por 200 px en su página, todo lo que coloque después en el orden de origen, sin agregar más estilos, ocupará el espacio debajo o al lado del cuadro verde, fuera de los límites establecidos.
Pero no todo en una página HTML ocupa un espacio que es respetado por otros elementos. Pensé que sería interesante enumerar y describir todas las cosas en CSS que no ocupan este tipo de espacio físico en un documento HTML.
Elementos Absolutamente Posicionados
Esto significa cualquier elemento que se establece en position: absoluteo position: fixed. Estos elementos se eliminan del flujo del documento, por lo que los elementos que aparecen después de ellos en el orden de origen no fluirán alrededor ni debajo de ellos. Básicamente, otros elementos se comportan como si los elementos absolutamente posicionados ni siquiera estuvieran allí.
Valores de desplazamiento para elementos posicionados relativamente
A diferencia de los elementos absolutamente posicionados, los elementos con position: relativeocupan espacio. Pero los desplazamientos que especifica en elementos posicionados relativamente usando top, right, bottomo left, no ocupan espacio. Esto puede parecer un poco extraño al principio.
El cuadro rosa sigue al cuadro azul en el orden de origen, por lo que, naturalmente, el espacio ocupado del cuadro azul no está disponible. Así que el cuadro rosa cae debajo. Luego, el hecho de que el cuadro azul esté relativamente posicionado y luego desplazado, hace que el cuadro azul se mueva. Pero este desplazamiento (20 px desde la parte superior y 20 px desde la izquierda) no afecta la posición del cuadro rosa. Esto se debe a que el espacio de desplazamiento en un elemento posicionado relativamente no ocupa ningún espacio.
Contornos
La outlinepropiedad es muy parecida a la borderpropiedad, con la diferencia de que los contornos no se suman al espacio ocupado del elemento sobre el que se aplica el contorno. Esta es la razón por la que las herramientas de desarrollo web pueden usar contornos para resaltar elementos con fines de depuración, sin hacer que los elementos a su alrededor se muevan o cambien de posición.
Observe que el cuadro azul tiene un contorno amarillo sólido de 50 px. El contorno se superpone al cuadro rosa debajo de él, en lugar de empujarlo hacia abajo, como sucedería si cambia el contorno a un borde.
Compensaciones causadas por transformaciones
Las transformaciones, en muchos sentidos, tienen un comportamiento similar a los elementos posicionados relativamente. Los tipos más obvios de transformaciones que hacen esto son las transformaciones de traducción, declaradas mediante la translate()función.
Traducir un elemento usando la transformpropiedad hará que el elemento transformado se reposicione, más o menos de la misma manera discutida anteriormente en el posicionamiento relativo. Esto significa que el espacio original ocupado por el elemento permanecerá intacto, como si el elemento no se hubiera movido. Pero el desplazamiento creado por la traducción no ocupa espacio.
De manera similar, cuando un elemento se rota , sesga o escala , se respeta el espacio original ocupado por ese elemento, pero las áreas cubiertas por desplazamientos debido a cualquiera de estas transformaciones no afectarán el flujo de otros elementos a su alrededor.
Oscuridad
Las sombras de cuadro y las sombras de texto pertenecen a la categoría de elementos que no provocan reflujo a su alrededor, por lo que no ocupan ningún espacio real en el documento. Cuando se aplican sombras, como es el caso con todas las demás características discutidas en esta publicación, no afectan la posición de los elementos circundantes.
En el caso de las sombras, esto es realmente significativo cuando intenta centrar un elemento, ya sea vertical u horizontalmente. Si un elemento tiene una sombra en un lado específico y no en el lado opuesto, esto hará que parezca que no está centrado. Esto se debe a que algo como «margen: 0 automático» no tiene en cuenta el tamaño de la sombra al centrar el elemento, por lo que es posible que deba agregar un margen opuesto o algo así si cree que esto afecta la estética.
Otros artículos varios
Algunas otras cosas notables que se crean mediante CSS pero que no ocupan espacio incluyen:
- Reflexiones de WebKit
- Filtros exclusivos de IE
- text-decoration
- Elementos con, quedisplay: none son diferentes de los elementos con visibility: hidden, estos últimos ocupan espacio
¿Qué pasa con los desbordamientos?
Una cosa importante que debe señalarse aquí es que, aunque estas funciones discutidas anteriormente no ocupan espacio en el documento, algunas de ellas pueden hacer que aparezcan barras de desplazamiento si se colocan de tal manera que se representen fuera de un elemento principal, o afuera de la ventana.
Algo como una sombra de texto no haría esto, pero un elemento transformado o relativamente posicionado sí. Por lo tanto, aunque los desplazamientos creados por transformaciones o elementos posicionados no ocupen espacio ni afecten a los elementos circundantes, pueden hacer que su elemento principal, o incluso la ventana, cree las barras de desplazamiento necesarias, a menos, por supuesto, que el elemento principal en cuestión esté configurado en overflow: hidden.
“Ocupar espacio”: ¿tal vez no sea la frase correcta?
Lo último que diré aquí es que, técnicamente hablando, la frase «no ocupa espacio» puede no ser la mejor opción aquí, aunque la he usado a lo largo de esta publicación.
Cuando la especificación analiza este tipo de cosas, generalmente usa una frase como «no causa reflujo». Pero he tratado de escribir esto principalmente con la comprensión en mente. Creo que es fácil entender lo que quiero decir cuando digo que algo “no ocupa espacio”, por lo que de ninguna manera estoy dando a entender que mi discusión aquí es semánticamente correcta. El concepto es realmente más importante que mi elección de palabras.
Feel Marketing Team
