Este tutorial se centrará en dos cosas: El espaciado exterior y los bordes exteriores.
Empecemos por los márgenes exteriores. Para un elemento p que se define directamente dentro del cuerpo, los márgenes izquierdo y derecho de la ventana son la distancia a los bordes exteriores del elemento cuerpo. Si se suceden varios párrafos, la información sobre los márgenes exteriores superior e inferior significa la distancia entre los párrafos individuales.
Al definir el espaciado exterior y los márgenes, también son posibles valores negativos, lo que permite lograr solapamientos.
Definición del margen exterior
El margen exterior y el espaciado son el espacio forzado entre el elemento actual y su elemento padre o vecino. Las siguientes propiedades CSS son útiles en elementos HTML que crean su propio párrafo o forman un bloque.
margin es la forma abreviada de las cuatro propiedades margin-top, margin-right, margin-bottom y margin-left. Son posibles los siguientes valores
- auto - el margen se calcula automáticamente.
- Porcentaje - se refiere al elemento para el que se especificó el margen.
- Especificación de longitud - también se permiten valores negativos. Esto permite que los elementos se solapen.
Se permiten hasta cuatro valores:
- un valor - margen superior, inferior, izquierdo y derecho
- dos valores - el primer valor para el margen superior e inferior, el segundo valor para el margen derecho e izquierdo
- tres valores - el primer valor para la distancia exterior en la parte superior, el segundo valor para la distancia exterior a la izquierda y a la derecha, el tercer valor para la distancia exterior en la parte inferior
- cuatro valores - el primer valor para la distancia exterior arriba, el segundo para la derecha, el tercero abajo y el cuarto a la izquierda.
El siguiente ejemplo muestra el uso de las propiedades generales de los márgenes:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { color de fondo: amarillo; } p.ex { margin: 30px 50px 30px 50px; background-color:#FF99FF; </style> </head> <body> <p>Creación de un rig de cámara</p> <p class="ex">En este vídeo de formación, aprenderás a crear un rig de cámara y a moverlo con seguridad por el espacio 3D. Se incluye un archivo de proyecto.</p> </body> </html>
En este ejemplo, se han definido dos párrafos de texto.
También se ha asignado espaciado al segundo párrafo.
margen: 30px 50px 30px 50px;
Esta especificación significa lo siguiente
- 30 píxeles de espaciado hacia arriba
- 50 píxeles a la derecha
- 30 píxeles de espaciado hacia abajo
- 50 píxeles de distancia a la izquierda
Especificaciones individuales para el espaciado
La especificación general de los márgenes se introdujo anteriormente. Sin embargo, también puede realizar especificaciones individuales. Las siguientes propiedades pueden utilizarse para especificar la distancia hacia arriba, izquierda, abajo o derecha para los márgenes individuales de un elemento.
- margin-top - margen exterior/distancia en la parte superior
- margin-right - margen exterior/distancia a la derecha
- margin-bottom - margen exterior/espacio en la parte inferior
- margin-left - margen/espacio a la izquierda
Se pueden utilizar los siguientes valores para las cuatro propiedades:
- auto - el margen se calcula automáticamente.
- Porcentaje - se refiere al elemento para el que se especificó margin- [superior, derecho, inferior, izquierdo].
- Especificación de longitud - también se permiten valores negativos. Esto permite que los elementos se solapen.
El siguiente ejemplo muestra cómo se pueden utilizar eficazmente las especificaciones individuales.
<!DOCTYPE html> <html> <head> <style> p { color de fondo: amarillo; } p.ex { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px; } </style> </head> <body> <p>Creación de un rig de cámara</p> <p class="ex">En este vídeo de formación, aprenderás a crear un rig de cámara y a moverlo con seguridad por el espacio 3D. Se incluye un archivo de proyecto.</p> </body> </html>
El resultado se ve así en el navegador
Establecer la distancia interna
El espaciado interno es el espacio forzado entre el contenido del elemento y su propio borde del elemento. Las siguientes propiedades CSS son útiles en elementos HTML que crean su propio párrafo o forman un bloque.Padding es la forma abreviada de las cuatro propiedades padding-top, padding-right, padding-bottom y padding-left. Puede utilizarse para definir la anchura entre el marco y el contenido de un elemento, es decir, el espaciado interior.
- Porcentaje - se refiere al elemento padre.
- Especificación de la longitud
Se pueden especificar hasta cuatro valores:
- un valor - espaciado interior superior, inferior, izquierdo y derecho
- dos valores - el primer valor para el espaciado interior superior e inferior, el segundo valor para el espaciado interior derecho e izquierdo
- tres valores - el primer valor para la distancia interior superior, el segundo valor para la distancia interior izquierda y derecha, el tercer valor para la distancia interior inferior
- cuatro valores - el primer valor para la distancia interior en la parte superior, el segundo para la derecha, el tercero en la parte inferior y el cuarto en la izquierda.
He aquí otro ejemplo:
<!DOCTYPE html> <html> <head> <style> p { color de fondo: amarillo;} p.ex { padding-top: 25px; padding-bottom: 25px; padding-right: 50px; padding-left: 50px; } </style> </head> <body> <p>Creación de un rig de cámara</p> <p class="ex">En este vídeo de formación, aprenderás a crear un rig de cámara y a moverlo con seguridad por el espacio 3D. Se incluye un archivo de proyecto.</p> </body> </html>Y aquí está el resultado en el navegador:
El espaciado interior se puede definir utilizando las cuatro propiedades de relleno. Para ello se dispone de las siguientes cuatro propiedades CSS:
- padding-top - distancia entre el borde superior del contenido y el margen superior.
- padding-bottom - distancia entre el borde inferior del contenido y el margen inferior
- padding-left - distancia entre el borde izquierdo del contenido y el margen izquierdo
- padding-right - distancia entre el borde derecho del contenido y el margen derecho.
Se pueden utilizar los siguientes valores para las cuatro propiedades:
- Porcentaje - se refiere al elemento padre
- Especificación de longitud
