Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 104

Visitas el mes pasado: 95

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




2. Texto en CSS (V)

2.5 Los márgenes

html

Como ya vimos anteriormente (página 2.3 Modelo de cajas) existen dos tipos de márgenes, el margen interno o padding y el margen externo o margin


El margen interno "padding"

El margen interno está entre el contenido y el borde, es transparente, y conserva algunas propiedades de la caja, como color de fondo, visibilidad, etc.

propiedades padding

Al igual que ocurre con el borde, hay cuatro propiedades padding para controlar los márgenes internos, que se corresponden con los cuatro lados de la caja. Su definición es:

padding-top
padding-right
padding-bottom
padding-left
Relleno superior
Relleno derecho
Relleno inferior
Relleno izquierdo
Valores ( <medida> | <porcentaje> ) | inherit
Descripción Establece de forma directa todos los rellenos de los elementos
Valor inicial 0
se aplica a Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla

Los valores de esta propiedad pueden ser medidas o porcentajes.

propiedad padding tipo "shorthand"

También podemos establecer el relleno o padding mediante la utilización de una propiedad de tipo "shorthand", que permiten indicar las propiedades anteriores de forma resumida:

padding Relleno
Valores ( <medida> | <porcentaje> ) {1, 4} | inherit
Descripción Establece cada uno de los rellenos horizontales y verticales de un elemento
Valor inicial 0
se aplica a Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla

Al igual que sucede en las propiedades "shorthand" de los bordes, esta propiedad puede tener entre uno y cuatro valores, con el mismo significado que en los casos anteriores. estos son:


El margen externo: margin

El margen externo es el espacio que dejamos entre el borde y los demás elementos adyacentes. no forma parte de la caja, aunque sí hay que tenerlo en cuenta para organizar los elementos de la página. En ocasiones tiene comportamientos un tanto específicos que veremos más adelante.

propiedades margin

Al igual que ocurre con el borde y el relleno (padding), hay cuatro propiedades margin para controlar los márgenes externos, que se corresponden con los cuatro lados de la caja. Su definición es:

margin-top
margin-right
margin-bottom
margin-left
Margen superior
Margen derecho
Margen inferior
Margen izquierdo
Valores ( <medida> | <porcentaje> | auto ) | inherit
Descripción Establece cada uno de los márgenes horizontales y verticales de un elemento
Valor inicial 0
se aplica a Todos los elementos, salvo margin-top y margin-bottom que sólo se aplican a los elementos de bloque y a las imágenes

Las unidades más utilizadas para indicar los márgenes de un elemento son los píxeles (cuando se requiere una precisión total), los em (para hacer diseños que mantengan las proporciones) y los porcentajes (para hacer diseños líquidos o fluidos).

El valor auto sólo tiene efecto con los márgenes horizontales, y deja todo el margen posible al lado indicado, siempre dentro del elemento contenedor. Así si queremos llevar la caja a la derecha, indicaremos margin-left: auto y al contrario si la queremos llevar a la izquierda. La aplicación a la vez de margin-left: auto y margin-right: auto nos centra la caja respecto de su elemento contenedor.

propiedad margin tipo "shorthand"

También podemos establecer el margen mediante la utilización de una propiedad de tipo "shorthand", que permiten indicar las propiedades anteriores de forma resumida:

margin margen
Valores ( <medida> | <porcentaje> | auto ) {1, 4} | inherit
Descripción Establece de forma directa todos los márgenes de un elemento
Valor inicial 0
se aplica a Todos los elementos salvo algunos casos especiales de elementos mostrados como tablas

Al igual que sucede en las propiedades "shorthand" del relleno (padding), esta propiedad puede tener entre uno y cuatro valores, con el mismo significado que en el caso anterior.

En el siguiente enlace se muestra una página en la que hemos aplicado a un texto varias de las propiedades vistas hasta ahora. La páginas van tomando ya forma y estilo:

Margenes y bordes.


Como el código de la página del enlace anterior es demasiado largo para ponertelo aquí, si quieres verlo, (ya sea por examinarlo, o por copiarte la página, etc.) lo puedes ver en este otro enlace:

Código de: Margenes y bordes.



Tratamiento de los márgenes verticales.

Los márgenes verticales sólo se pueden aplicar a elementos de bloque e imágenes, por lo que elementos tales como enlaces, etiquetas de texto en negrita o en cursiva y otro tipo de etiquetas que son elementos en línea, sólo aceptan los márgenes horizontales.

FUSIÓN DE MÁRGENES: Cuando se juntan dos o más márgenes verticales, se fusionan de forma automática y la altura del nuevo margen será igual a la altura del margen más alto de los que se han fusionado, según el siguiente esquema:


fusión de márgenes verticales 1

Igualmente, si un elemento está contenido dentro de otro elemento, sus márgenes verticales se fusionan y resultan en un nuevo margen de la misma altura que el mayor margen de los que se han fusionado:


fusión de márgenes verticales 2

Aunque en principio puede parecer un comportamiento extraño, la razón por la que se propuso este mecanismo de fusión automática de márgenes verticales es el de dar uniformidad a las páginas web habituales. En una página con varios párrafos, si no se diera este comportamiento y se estableciera un determinado margen a todos los párrafos, el primer párrafo no mostraría un aspecto homogéneo respecto de los demás.


motivo de la fusión de párrafos

En el caso de un elemento que se encuentra en el interior de otro y sus márgenes se fusionan de forma automática, se puede evitar este comportamiento añadiendo un pequeño relleno (padding) o un borde de estilo transparente al elemento contenedor.




En el siguiente tema veremos cómo seleccionar los distintos elementos de la página para poderles aplicar las propiedades :

Selectores.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com