CursosEmpresasBlogLiveConfPrecios

Display

Clase 11 de 29 • Curso de Tailwind CSS 1

Clase anteriorSiguiente clase
Resumen

¿Qué son los tipos de caja de presentación en CSS?

Los tipos de caja de presentación son fundamentales en el diseño web, ya que determinan cómo se muestran y organizan los elementos en la pantalla. Los tipos más importantes incluyen block, inline, inline-block y flex, cada uno con sus características y usos específicos para asegurarse de que nuestros diseños sean visualmente atractivos y funcionales. En esta clase, nos enfocaremos en los tres primeros y dejaremos flex para un análisis detallado posteriormente.

¿Cómo funcionan block, inline y inline-block en CSS?

Cada tipo de caja tiene un comportamiento único sobre cómo ocupa el espacio en el diseño:

  • block: Este tipo de display ocupa todo el ancho disponible del contenedor en el que se encuentra. Los elementos con display block empiezan siempre en una nueva línea y ocupan todo el ancho disponible, perfecto para elementos como párrafos y divs.

  • inline: Al contrario del bloque anterior, inline ocupa solo el espacio necesario para su contenido y no obliga a que los elementos siguientes comiencen en una nueva línea, como cuando trabajamos con elementos como <span> y enlaces.

  • inline-block: Es similar a inline, pero estos elementos pueden tener un tamaño ajustable utilizando propiedades como width y height. Esto es útil cuando necesitamos que los elementos mantengan cierta alineación y dimensiones específicas en un diseño fluido.

¿Cómo se implementan block, inline y inline-block en HTML y CSS?

Para experimentarlo, utilizaremos un archivo HTML y algunas reglas de CSS básicas.

<!DOCTYPE html>
<html>
<head>
    <title>Demostración de Display</title>
    <style>
        .block-div {
            display: block;
            background-color: lightgray;
        }
        .inline-div {
            display: inline;
            background-color: lightgreen;
        }
        .inline-block-div {
            display: inline-block;
            background-color: lightblue;
            width: 100px;
            height: 50px;
        }
        .box {
            margin-top: 8px;
            padding: 4px;
        }
    </style>
</head>
<body>
    <div class="box block-div">Block Element</div>
    <div class="box inline-div">Inline Element</div>
    <div class="box inline-div">Another Inline Element</div>
    <div class="box inline-block-div">Inline-block Element</div>
</body>
</html>

¿Cómo afectan estos tipos de display al comportamiento de las cajas?

  • block se usa comúnmente para estructurar la disposición vertical de la página, ya que se alinea en forma de caja una debajo de otra, utilizando toda la anchura del contenedor.

  • inline nos permite colocar elementos en línea, uno al lado del otro, sin romper el flujo del documento, muy útil para texto y elementos pequeños en serie.

  • inline-block equilibra ambas capacidades, permitiendo que los elementos se dispongan en línea, a la vez que permiten configuraciones de ancho, alto y otros aspectos visuales más complejos.

Incorporar estos conocimientos y practicar cómo afectan al diseño y la disposición en la web abrirá un mundo de posibilidades en tus proyectos. Recuerda, experimentar y modificar los ejemplos es clave para entender profundamente cómo funcionan estos tipos de caja. ¡Sigue practicando y explorando para dominar el arte del diseño web!