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
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>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias