HTML/CSS básico (IV) - Bordes y Márgenes

Vamos a ver si aclaro estos conceptos de margin, padding y border:

El atributo 'margin'
Si inserto un texto (con <span style...) y, sin más, a continuación inserto otro, con distinto fondo (background'), lo veremos así:
TEXTO INSERTADO TEXTO INSERTADO 'B'
Ahora voy a volver a insertarlo, pero marcando unos márgenes (en pixeles, o en 'em') para el texto con fondo 'fucsia', saldría así:
TEXTO INSERTADO TEXTO INSERTADO 'B'
se ve claro lo que significa ¿no?
(el código HTML tendría, en el ejemplo, esta pinta:
<span style="margin: 3em;">< background: fuchsia; ">TEXTO INSERTADO</span>
<span style="background: silver;">TEXTO INSERTADO 'B'</span>
(Nota: la barra de herramientas del 'modo Redactar' te permite crear los 'background' con el icono (un 'subrayador') que está a la derecha del icono A▾ de colorear el texto.

El atributo border
El borde de la caja de texto es, por defecto, cero. Puedes hacer que algún texto aparezca rebordeado (y definir el color de ese borde, su grosor y su estilo de línea) con <span style="grosor tipo_de_linea color,">...</span>
Por ejemplo, el texto que sigue está hecho con la siguiente etiqueta
<span style="border: 4px double red;">Texto insertado</span>

TEXTO INSERTADO

Nota importante: el estilo de las líneas (en el ejemplo, 'double') puede ser: solid (linea continua), dotted (de puntos), dashed (rayas discontinuas) y (solo se perciben en bordes algo gruesos), double (continua, doble) y, como bordes más 'artísticos' (es cuestión de probarlos) groove, ridge, inset y outset.

El atributo 'padding'
Es, por decirlo así, el 'margen interior' de la caja. Con 'padding' se trabaja de forma similar a con 'margin', que acabamos de ver.
Mira, el mismo caso, aplicando un padding de 20 y un border rojo de 2 pixeles, en línea contínua (solid)



 TEXTO INSERTADO



Nota importante: un padding grande, en los textos, puede sobreponerse a las líneas de texto anteriores o siguientes. Bueno, siempre puedes introducir líneas en blanco, o definir también el atributo 'margin'

Margin, padding y border en las imágenes

Ahora voy a añadir una imagen eligiendo que se posicione a la derecha.
De esta forma, y automáticamente, Blogger activa el atributo 'float' y podemos escribir el texto en paralelo a la imagen.

La imagen tiene, por defecto, margin-bottom: 1em; margin-left: 1em;" e img border="0". 
Pero le voy a poner border= 1, para verlo mejor.

Por cierto: es muy interesante esto de 'em' y 'pixeles', que te lo explica muy bien la Wikipedia.

Y así es como se vería si le pongo border=0, y aumento el margin a 4em. Respecto a lo del padding, visto lo dicho arriba, creo que, en las imágenes, usando solo 'margin' se pueden conseguir los resultados apetecidos.

Aquí, puedo subir el texto... pero ya ves que el margin me restringe más la posibilidad de poder ocupar todo el ancho de la caja del blog.
Así que, normalmente, lo mejor es dejarlo por defecto (margin=1em), que es más que suficiente para separar las imágenes del texto.

Recordatorio final
Por 'facilidades de CSS' en margin y padding (y quizás también en alguna otra cosa,
un solo valor (por ejemplo 'margin: 2em') significa que se aplica (el mismo valor) a los cuatro márgenes (arriba, abajo, dcha e izda).
Si pones dos valores (pueden ser distintos, por ejemplo margin: 20px 40px) el primero se aplica a ambos márgenes verticales y el segundo a los horizontales.
Si pones tres valores, el primero se refiere al margen superior, el segundo a los horizontales (ambos) y el tercero al margen inferior.
Si pones cuatro valores, se aplican, por su orden, a arriba, derecha, abajo e izquierda.
Y si no quieres memorizar estas cosas, y te apetece personalizar cada margen, siempre puedes recurrir a escribir, simplemente, lo que quieras:
margin-left: ...; margin-top: ...; margin-right: ...; margin-botton: ...;
...y solucionado.