BOX MODEL

En los navegadores, todo se construye a partir de cajas.

Estos gestionado bajo esta modelo donde

El borde (border), en negro, es el límite que separa el interior del
exterior del elemento.
El márgen (margin), en naranja, es la parte exterior del elemento, por
fuera del borde. sí escribimos margin:5px; establecemos un margen de
5 píxeles en los 4 lados de la caja. Podemos especificarlos de forma
independiente mediante margin-top, margin-right, margin-bottom y
margin-left.
El relleno (padding), en verde, es la parte interior del elemento, entre el
contenido y el borde. Que se aplica del borde hacia adentro. Se puede
usar de forma independiente también con padding-top, padding-
right, padding-bottom y padding-left.
El contenido, en azul, es la parte interior del elemento, excluyendo el
relleno.
Para este modelo la etiqueta más utilizada es div, en este orden de
ideas se trabaja con dos propiedades especificas el ancho (width) y
largo (height)
Aquí aplicamos

Resultado
En este caso, por ejemplo, a pesar de estar indicando un tamaño de
800px, pero si se juega con las propiedades min-width y min-height ó
max-width y max-height, podemos darle un valor máximo a la cajas.
Combinando esto con estas propiedades
 background-color: para asignar un color de fondo a la caja.
 background-image: Para asignar una imagen de fondo a la caja
mediante el valor url('imagen.jpg'), siendo imagen.jpg la ubicación del
archivo de la imagen que queramos utilizar.
 border-width: para definir el grosor del borde, por ejemplo, 2px.
 border-style: Para especificar el tipo de línea del borde. Hay varios
tipos que podemos consultar aquí, pero lo normal es usar el valor
solid.
 border-color: Asignamos el color del borde.
border: con esta propiedad podemos especificar las tres anteriores en
una en el mismo orden que las hemos indicado. El único valor que no
podemos omitir sería el segundo, indicando el estilo de línea.
Resultado

Sobre el posicionamiento puede darse en bloque (block) o en línea

(inline)
Los bloques ocupan todo el ancho de pantalla y siempre comienzan en
una línea nueva. Estos elementos pueden contener a otros elementos
de bloque o en línea y su altura varía en función de su contenido.
El posicionamiento en línea (inline), Ocupan el espacio de su contenido,
no tienen por qué comenzar en una nueva línea, sólo pueden contener
a otros elementos inline y sus dimensiones no se pueden especificar
mediante CSS.
El posicionamiento estático es el que los elementos de bloque aparecen
unos debajo de otros según el flujo en que los pongamos en el
documento y el posicionamiento relativo , Podemos especificar
desplazamiento a una caja con respecto a su posición original en el flujo
de ejecución
CSS

HTML
PRACTICA
Los archivos están el en aula virtual
1.-Para el primer parrafo, color de fuente #2d6921, borde de 3px dotted
y color #d66f0f, anchura de 500px, fuente en negrita, relleno en los
cuatro lados de 20px, texto alineado a la derecha y un margen inferior
de 100px.
Para el segundo parrafo, borde de 3px solido y color azul, anchura
500px, centrado automáticamente, relleno a los cuatro lados de 50px y
la fuente en cursiva.
Para el tercer parrafo, anchura del 30%, borde de 6px outset y color
#666, relleno a los cuatro lados de 10px, texto justificado y un
interlineado de 30px.
Para el cuarto parrafo, anchura del 75%, borde superior de 3px solido y
color #f0377b.
2.-
pborde solido de color marrón, fuente verdanda de 3 puntos,marge
izquierdo debe estar separado, 10 pixelex de borde respectivo
margen derecho debe separarse 20 pixeles, marge superior debe
separarse 30 pixeles
div borde punteado color chocolare, fuente familia arial,elemento
padding debe estar separado del extremo superior 5 pixeles y elemento
padding inferior debe separarse 5 pixeles