37- Inline-block en CSS: qu茅 es y c贸mo usarlo 馃敳

HTML






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







Publicar un comentario

0 Comentarios