En CSS, los elementos se tratan siempre como cajas o bandas rectangulares. Las siguientes propiedades -que sin duda ya conoces- se utilizan para describir las cajas:
- width - la anchura del elemento
- height - altura del elemento
- left - distancia a la izquierda
- right - distancia a la derecha
- top - distancia hacia arriba
- bottom - distancia a la parte inferior
- margin - el margen exterior
- borde - el borde alrededor del elemento
- padding - el espacio interior, es decir, la distancia entre el marco y el contenido del elemento.
Estas propiedades ya se han introducido.
La anchura total de un elemento es la suma de la anchura de las especificaciones individuales. (Lo mismo ocurre con la altura).
He aquí un ejemplo:
div#box { width: 100px; padding: 20px; /* cada 20px a izquierda y derecha / border: 2px solid; / cada 2px a izquierda y derecha / margin: 0 30px; / cada 30px a izquierda y derecha */ }¿Cuál es el ancho de esta área div? Echemos un vistazo a los valores individuales:
- 100 píxeles
- 2 veces 20 píxeles
- 2 veces 2 píxeles
- 2 por 30 píxeles
El resultado es una anchura total del elemento de 204 píxeles.
La anchura y la altura de los elementos vienen determinadas por width y height. Si estas especificaciones no están explícitamente en la hoja de estilos, se aplica lo siguiente:
- Si falta width, la caja se muestra tan ancha como el elemento que la rodea.
- Si falta la altura, el elemento se mostrará tan alto como su contenido.
Un ejemplo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutoriales.es</title> <style> div#box { border: 1px solid; /* 2px left and right */ margin: 0 30px; /* 30px left and right */ background-color:#6600CC; } </style> </head> <body> <div id="box">PSD-Tutorials.es</div> </body> </html>
Esto se ve así en el navegador:
El elemento padre del elemento div es body. En consecuencia, el elemento se muestra realmente tan ancho como el elemento body. La altura, sin embargo, se basa en el contenido.
Todo a cero
Cada navegador tiene una hoja de estilos incorporada. En estas hojas de estilo se definen algunos valores por defecto. Esto también se aplica al relleno y al margen, por ejemplo. Y estos valores por defecto, por desgracia, varían en los distintos navegadores. Este aspecto dificulta la obtención de resultados idénticos en los respectivos navegadores, por ejemplo, en relación con el modelo de caja. Por lo tanto, es aconsejable poner a cero los márgenes especificados en los navegadores. Esto puede hacerse de la siguiente manera
* { padding: 0; margin: 0; }
Inserte esta línea al principio de su hoja de estilo. De este modo, ya puede empezar a colocar las cajas en las posiciones deseadas.
Tipos de cajas
La forma en que un elemento se muestra en última instancia y cómo afecta a otros elementos depende del tipo de elemento. De hecho, la especificación CSS distingue entre elementos de bloque y elementos en línea. (Existen otros tipos, pero se ignorarán aquí, ya que sólo desempeñan un papel subordinado).
Los elementos de bloque siempre crean una nueva línea. Los elementos subsiguientes también empiezan en una nueva línea. Los elementos de bloque típicos son p, div, h1, ul, etc. Las propiedades de espaciado exterior, espaciado interior, altura, anchura y marco enumeradas anteriormente se aplican a estos elementos.
<h1>Pintura digital y Matte Painting: Definir la composición de la imagen</h1> <p>Módulo 2 - Parte 2: Una imagen es siempre un todo. Sin embargo, siempre hay que tener en cuenta dónde debe mirar primero el espectador.</p> <p>
Un vistazo al resultado en el navegador muestra que h1 y p generan cada uno su propia línea.
Los elementos en línea, en cambio, no crean su propio párrafo, sino que se muestran en el flujo de texto normal. Los elementos en línea típicos son span, em, strong, img, br, etc. Los elementos en línea no tienen espaciado vertical ni especificaciones de anchura y altura.
<h1><em>Pintura digital y pintura mate</em>: Definición de la composición de la imagen</h1> <p>Módulo 2 - Segunda parte: <strong>Una imagen es siempre un todo</strong>. Sin embargo, siempre hay que tener en cuenta dónde debe mirar primero el espectador</p>.
Y aquí también, un vistazo al resultado:
Ahora puedes convertir elementos que en realidad son elementos de bloque en elementos en línea.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutoriales.es</title> <style> h1 { background-color:#00CCFF; } </style> </head> <body> <h1>Pintura digital y pintura mate</h1> <p>Módulo 2 - Parte 2: <em>Una imagen es siempre un todo</em>. Sin embargo, siempre debes tener en cuenta dónde debe mirar primero el espectador.</p> </body> </html>Observa el resultado en el navegador.
El color de fondo del encabezado h1 indica que el elemento abarca todo el ancho. La anchura se basa en el elemento padre body.
Ahora entra en juego la propiedad display.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutoriales.es</title> <style> h1 { display:inline; background-color:#00CCFF; } </style> </head> <body> <h1>Pintura digital y pintura mate</h1> <p>Módulo 2 - Parte 2: <em>Una imagen es siempre un todo</em>. Sin embargo, siempre hay que tener en cuenta dónde debe mirar primero el espectador.</p> </body> </html>.
El ancho del elemento se modifica mediante display: inline.
De hecho, el ancho del elemento ahora se adapta al contenido existente. He aquí un resumen de los valores que aún se pueden asignar a display
- none - no se muestra
- block - el elemento se muestra como un elemento de bloque, es decir, crea una nueva línea.
- inline - el elemento se muestra como un elemento inline, es decir, aparece en el flujo de texto actual.
- inline-block - crea un bloque externo para el que se puede especificar altura, anchura y espaciado. Sin embargo, cada elemento permanece en el flujo de texto actual. Es, por tanto, una combinación de bloque y elemento inline.
- list-item - el elemento se muestra como un elemento de bloque. Sin embargo, también va precedido de una viñeta.
- run-in - crea un elemento de bloque o en línea en función del contenido.
- table - funciona como el elemento table conocido de HTML.
- inline-table - funciona como el elemento HTML tabla, pero en línea.
- table-row - el elemento contiene elementos hijos dispuestos uno al lado del otro. Funciona como el elemento HTML tr.
- table-cell - el elemento representa una celda de tabla y funciona como los dos elementos HTML th y td.
- table-row-group - el elemento contiene un grupo de elementos con varios elementos hijos dispuestos uno al lado del otro y tiene el mismo efecto que el elemento HTML tbody.
- table-header-group - el elemento contiene un grupo de elementos con varios elementos hijo dispuestos uno al lado del otro y tiene el mismo efecto que el elemento HTML thead.
- table-footer-group - el elemento contiene un grupo de elementos con varios elementos hijos dispuestos uno al lado del otro y tiene el mismo efecto que el elemento HTML tfoot.
- table-column - se utiliza para describir las propiedades de las celdas de una columna. table-column funciona como el elemento col de HTML.
- table-column-group - este elemento contiene un grupo de elementos que se utilizan para describir las propiedades de las celdas de una columna. Funciona como el elemento col-colgroup de HTML.
- table-caption - se utiliza para definir el título de la tabla. La propiedad tiene el mismo efecto que el elemento HTML caption.
En realidad, CSS ofrece diferentes opciones de visualización para los distintos tipos de elementos. Estos juegan un papel decisivo en relación con el posicionamiento de los elementos. Más sobre esto en los próximos tutoriales.
