37-inline-block en css

Si comparamos display: inline y display: inline-block vamos a notar que el segundo permite estabelecer un ancho y un alto en el elemento

Con display: inline-block tambien se respectan las margenes, rellenos, superior y inferior, pero con display-inline no se respectan

Diferencias entre inline y inline-block

display: inline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

display: inline-block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

display: block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

---

...

inline-block para navegacion

podemos usar la propriedad inline-block para crear un menu de navegacion

ejemplo del nav

• Home
• Nosotros
• Nuestros Clientes
• Contacto

Ejemplo del codigo anterior

<ul style=" background-color: green; 
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;">
<li style=" display: inline-block;font-size: 20px;padding: 20px;"><a href="#home" style="color:white">Home</a></li>
<li style=" display: inline-block;font-size: 20px; padding: 20px;"><a href="#about" style="color:white">Nosotros</a></li>
<li style=" display: inline-block;font-size: 20px; padding: 20px;"><a href="#clients" style="color:white">Nuestros Clientes</a></li>
<li style=" display: inline-block;font-size: 20px;padding: 20px;"><a href="#contact" style="color:white">Contacto</a></li>
</ul>
        

---

Ir al indice