Border es el borde del elemento propiamente dicho, la linea que rodea el objeto.. para definirlo se puede usar de la forma que lo hiciste en tu ejemplo indicando el grosor de la linea (en px), el tipo de linea (dotted, dashed, solid, double, inset, groove, outset y ridge son los valores permitidos, los últimos 4 con un "efecto" 3D), y por último el color de la línea. Los 3 valores se pueden escribir directamente en la propiedad "border" o dividirlos en "border-width", "border-style" y "border-color" respectivamente.
En caso de que quieras que no todos los bordes estén definidos, o quieras diferentes grosores y/o colores, podes usar "border-top" para la linea superior, "border-left" para la izquierda, "border-right" para la derecha y "border-bottom" para la inferior.
---
Margin es el espacio que hay desde el borde hacia afuera del elemento (según el valor que hayas especificado).
Hay 4 formas de usar esta propiedad:
- Una es indicando "margin: valor" (ej: margin: 10px;).
- La segunda, "margin valorY valorX" (ej: margin: 15px 10px;) donde el primer valor indica el margen superior e inferior y el segundo indica el margen izquierdo y derecho.
- La tercera es indicando los 4 valores: "margin: valor1 valor2 valor3 valor4;" (ej: margin: 15px 10px 15px 10px;) siendo superior, derecho, inferior e izquierdo respectivamente.
- Y por último, igual que border.. indicando que margen se va a modificar: "margin-top", "margin-right", "margin-bottom" y "margin-left. (ej: margin-bottom: 20px;).
--
Padding es el espacio desde el borde hasta el contenido del elemento según el valor que hayas especificado. También hay 4 formas de usarlo y es exactamente como margin:
- "padding: valor;" para indicar el espacio de relleno de todo el elemento.
- "padding: valorY valorX;"
- "padding: valor1 valor2 valor3 valor4;"
- "padding-top", "padding-right", "padding-bottom", "padding-left".
--
Y content es una propiedad que se utiliza en las pseudo-clases :before y :after para agregar contenido. Dificil de explicar, se le puede dar varios usos, por ejemplo para agregar una pequeña flecha a un elemento, el href de un enlace al texto de dicho enlace, algún adorno en particular, un item personalizado a las listas, en fin.. te recomiendo que para entenderlo mejor busques ejemplos del uso de content en google y los pongas en práctica.
Agregado: Para margin y padding hay una quinta opción y es usar 3 valores, por ejemplo "margin: 15px 20px 10px;".. donde el primer valor es el superior, el segundo indica izquierda y derecha, y el tercer valor es el inferior, pero yo personalmente nunca la he usado y nunca he visto que alguien lo ponga en práctica, por eso la obvie en la explicación, pero existe.
Espero haya quedado entendible, lo escribi lo mas explicativo posible.. cualquier duda, consulta.
Saludos
PD: Yo estaba escribiendo esto mientras Ángel ya había contestado
