Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
La propiedad display nos permite definir, para un elemento de HTML:
- Como será mostrado.
- Como se va a comportar con respecto de los elementos que lo rodean.
- En el caso de los estilos display: grid y display:flex, permite definir la estrutura o layout de los elementos internos.
El valor por defecto de la propiedad display para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea).
display: block. El elemento…
- Respeta el ancho y el alto especificados.
- Se coloca verticalmente a respecto del anterior .
- Si tiene contenido y no especificamos ancho ni alto, el ancho será el 100% de la capa que lo contiene y el alto será lo que ocupe el contenido.
- Algunos ejemplos de etiquetas cuya propiedad display es block son: div, p, form…
display: inline. El elemento…
- No respeta el ancho ni el alto.
- Se coloca horizontalmente a continuación del anterior.
- Algunos ejemplos de etiquetas cuya propiedad display es inline son: a, span.
display: inline-block. El elemento…
- Respeta el ancho y el alto.
- Se coloca horizontalmente a continuación del anterior.
display: table → aunque mucho menos frecuente que los estilos anteriores, este estilo alinea los elementos verticalmente pero ajusta su ancho al ancho del contenido, siendo una mezcla de display: block y de de display: inline-block.
Ejemplo de varios posicionamientos
<style>
.container{
text-align: ;
overflow: ;
background:pink;
}
.col{
width:300px;
display: ;
float: ;
vertical-align: ;
padding: ;
}
</style>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum recusandae autem
sapiente
veritatis, perferendis ea fugiat, provident repellendus, vitae a iusto animi tenetur, rem tempore neque.
Atque
suscipit dolorem, ea!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure, a ad,
voluptas
beatae obcaecati dolorem asperiores libero nesciunt dignissimos.
Eliminar la separación entre capas cuando usemos display: inline-block
Para evitar el espacio en blanco que hay entre las capas podemos:
- poner las capas una a continuación de la otra, sin saltos de línea ni espacios en blanco.
- comentar los saltos de línea
<div></div><!-- --><div></div> - Ajustar la maquetación de las capas
<div></div ><div></div> - trabajar los font-size de 0px para eliminar esta separación (para mi gusto, la peor opción).
