Para ubicar la información de una página web en lugares precisos, especificaremos
los márgenes en documentos CSS. Algunas páginas
disponibles en internet carecen de espaciados correctos alrededor de los texto,
por lo tanto, tienden a verse desorganizados. Para evitar esto, identificaremos
las diferentes propiedades de CSS, para ubicar con presición un texto en una
página web.
El margen, es una de las opciones
para modificar con el modelo de cajas CSS. Lo encontramos luego del borde del
elemento, como se muestra en la siguiente imagen.
061-01_0704_ilu01.
Valores disponibles para margin
Definimos margin con tres posibles valores:
- Números,
como por ejemplo 16px.
- Porcentajes,
como por ejemplo 20%.
- Automático,
con el valor auto.
Cuando el margen se define en
automático, el contenido se muestra con los valores predeterminados del
navegador web. Para la definición de
márgenes tenemos cuatro diferentes propiedades:
- margin-top: para el margen superior.
- margin-right: para el margen derecho.
- margin-bottom: para el margen inferior.
- margin-left: para el margen izquierdo.
En la siguiente ilustración tenemos
cada uno:
061-01_0704_ilu02.
Propiedades de margin
Para las especificaciones
individuales de la propiedad margin, se
utiliza el mismo procedimiento utilizado en la definición de border, es decir, agregar cuatro valores
para cada lado del margen, o agregar top,
right, bottom y left para cada uno
por separado. Para la definición de margen en la etiqueta body, el orden seguido es en sentido de las agujas del reloj, como
se muestra en la siguiente ilustración:
061-01_0704_ilu03.
Tipos de especificaciones de margin
Existen dos consideraciones importantes a tener
presentes cuando se definen márgenes:
- Si un
elemento está debajo del otro y el primero tiene menor margen, se van a interponer
uno sobre otro, e interfiere en la presentación de cada uno.
- Si un
elemento en línea tiene margen especificado, este se aplica solo en los lados y
se omite el espacio de arriba y abajo.
En la siguiente imagen tenemos un
ejemplo de cada uno.
061-01_0704_ilu04.
Consideraciones de margin
A veces surgen problemas cuando definimos márgenes
debido a las especificaciones predeterminadas del navegador web; para conocerlas, hacemos clic derecho
en la página, y seleccionamos la opción Inspect
element, con la finalidad de evaluar con precisión el estilo aplicado a
elementos. El procedimiento es similar en todos los navegadores web, en el ejemplo de la siguiente
imagen utilizamos Mozilla Firefox.
061-01_0704_ilu05.
Proceso de inspección de páginas web
Una solución para evitar este tipo de problemas, es
implementar el CSS reset y
definiciones personalizadas para diferentes etiquetas básicas de una página web.
Keynotes
- Definimos margin con tres posibles valores: Números, como por ejemplo 16px.
Porcentajes, como por ejemplo 20%. Automático, con el valor auto.
- Para la definición de márgenes tenemos
cuatro diferentes propiedades: margin-top:
para el margen superior. margin-right:
para el margen derecho. margin-bottom:
para el margen inferior. margin-left:
para el margen izquierdo.
- Para las especificaciones individuales de la
propiedad margin, se utiliza el mismo
procedimiento utilizado en la definición de border,
es decir, agregar cuatro valores para cada lado del margen, o agregar top, right, bottom y left para cada uno por separado.
- Si un elemento está debajo del otro y el
primero tiene menor margen, se van a interponer uno sobre otro, e interfiere en
la presentación de cada uno.
- Si un elemento en línea tiene margen
especificado, este se aplica solo en los lados y se omite el espacio de arriba
y abajo.
RetoCrea cinco márgenes a diferentes
elementos de un documento CSS externo. Sigue las recomendaciones oficiales de
este lenguaje.
¡Comparte el resultado final del
reto en tu vBox y píde a tres
compañeros comentar una sugerencia de optimización!
Tiempo disponible: entre 15 y 30
minutos.
CierreCon la especificación de márgenes en documentos CSS,
creamos páginas para internet con espaciados
correctos arrededor de los texto, por lo tanto, serán apreciadas de forma
organizada. Asimismo, ubicamos la información de una página web en lugares precisos. Con
perseverancia y determinación obtendremos proyectos para internet pulcros y con
una disposición precisa del contenido.
