37- Inline-block en CSS: qué es y cómo usarlo 🔲

---

CSS Layout - display: inline-block

• El valor display: inline-block
• Uso de inline-block para crear enlaces de navegación

---

El valor display: inline-block

El valor display: inline-block es una propiedad CSS que permite a los elementos comportarse como bloques en línea, lo que significa que ocupan solo el espacio necesario y pueden colocarse uno al lado del otro, mientras mantienen algunas características de los elementos de bloque.

Esto es especialmente útil cuando se desea crear un diseño donde los elementos se alinean horizontalmente sin ocupar el ancho completo del contenedor. A continuación, se muestra un ejemplo de cómo usar display: inline-block para alinear divs horizontalmente.

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: #4CAF50;
        display: inline-block;
        margin: 5px;
        color: white;
        text-align: center;
        line-height: 100px;
    }
</style>

<div class="box">Caja 1</div>
<div class="box">Caja 2</div>
<div class="box">Caja 3</div>
                

Ejemplo Visual:inline-block

Caja 1

Caja 2

Caja 3

---

Uso de inline-block para crear enlaces de navegación

La propiedad inline-block se usa frecuentemente para crear enlaces de navegación que se alineen horizontalmente. Esto permite que cada enlace ocupe solo el espacio necesario y conserve los márgenes y padding como si fueran elementos de bloque, facilitando un diseño de navegación ordenado y compacto.

A continuación, se muestra un ejemplo de cómo crear un menú de navegación usando display: inline-block.

<style>
    .nav-link {
        display: inline-block;
        padding: 10px 15px;
        background-color: #4CAF50;
        color: white;
        text-decoration: none;
        margin-right: 5px;
        border-radius: 5px;
    }
    .nav-link:hover {
        background-color: #45a049;
    }
</style>

<a href="#" class="nav-link">Inicio</a>
<a href="#" class="nav-link">Servicios</a>
<a href="#" class="nav-link">Contacto</a>
                

---

Ejemplo Visual

Inicio Servicios Contacto

---

Ir al índice

---