⇑POSICIÓN {position : x}

CSS21

Para declarar como un elemento puede posicionarse con las propiedades

de desplazamiento {top}, {right}, {bottom} y {left}. Los valores de x
pueden ser

● static. (VALOR INICIAL). La caja es situada de acuerdo al flujo

normal y las propiedades de posicionamiento top, right, bottom,
left no se aplican aunque se declaren.
● relative. La posición se calcula de acuerdo al flujo normal, pero
luego la caja se sitúa con top, right, bottom, left de forma
relativa a esta posición. La siguiente caja en el flujo se calcula como
si la anterior relativa no se hubiera desplazado.
● absolute. La posición queda establecida con las propiedades de
posicionamiento top, right, bottom, left, especificando donde
estarán situadas con respecto a su bloque de contención. El
elemento entonces es quitado del flujo normal, como si no existiera
para la composición de los elementos de su entorno. Los márgenes
de las cajas posicionadas absolutamente no se cierran, de tal forma
que sus márgenes se superponen conservando el margen más
grueso.
● fixed. La posición se calcula igual que para absolute, pero la caja en
pantalla (medios continuos) queda fijada con respecto a la ventana
del navegador y no se mueve cuando se usa la barra de
desplazamiento. En salida impresa (medios paginados) se fija con
respecto a la hoja impresa.
● inherit. (NO SE HEREDA)

Se aplica a todos los elementos. En elementos posicionados puede

encontrar información importante relacionada con esta propiedad así
como su relación con {display} y {float}.
Los elementos son presentados por el navegador fluyendo en el orden en
que se codifican, lo que se denomina flujo normal o estático, que es la
opción por defecto (static). Podemos eliminar el elemento del flujo y
especificar la posición absoluta con respecto al elemento padre
(absolute), o bien fijada con respecto a la ventana del navegador (fixed).
También podemos mover el elemento de forma relativa a su posición por
defecto en el flujo (relative). En los ejemplos siguiente veremos como se
usan.

Ejemplo {position}: Posiciones relativas

En este caso lo de relativo se entiende en relación a la posición que

ocuparía el elemento si estuviera en flujo estático. En este ejemplo
mostramos como a pesar que dos párrafos división consecutivos se
muestran en el flujo estático uno detrás de otro, conseguimos que el
segundo párrafo se fuerce a ocupar una posición de -1.3em más arriba,
es decir, retrocede en el flujo vertical -1.3 veces el tamaño de la altura de
su fuente. De esta forma los situamos los dos en la misma línea
(aproximadamente).
<div>
Un párrafo.
</div>
<div style="color:red; text-align:right; position:relative;
top:-1.3em;" >
(párrafo a la derecha)
</div>

Resultado:

Un párrafo.

(párrafo a la derecha)
 Márgenes de una página web
Mediante las hojas de estilo CSS podemos modificar los márgenes de una página
web. Esto hará que nuestro contenido se posicione en un lugar u otro de la página.
Lo podremos pegar al borde superior, separarlo de la izquierda,… Todo aquello que
necesitemos para darle estilo a la página web.
Si queremos modificar los márgenes de una página web deberemos de utilizar
cuatro propiedades CSS:

● margin-bottom, para el margen inferior.

● margin-left, para el margen izquierdo.
● margin-right, para el margen derecho.
● margin-top, para el margen superior.

Estas propiedades CSS se las podemos asignar a cualquier elemento HTML. Si

bien, para nuestro caso se lo asignaremos al cuerpo de la página. Es decir, al
elemento body.
De esta manera, el código CSS quedaría de la siguiente forma:

body{

margin-left: 0px;

margin-right: 10px;

margin-top: 0px;

margin-bottom: 10px;
}

En el caso de que queramos asignar el mismo valor a todos los márgenes podemos
utilizar directamente el atributo margin, asignándole un valor.
En este punto el código quedaría de la siguiente forma:

body{

margin: 10px;
};
http://lineadecodigo.com/css/margenes-de-una-pagina-web/

https://www.wextensible.com/temas/xhtml-css/css-dimension.html#margin-s
https://www.wextensible.com/temas/xhtml-css/css-posicio