[SOLUCIONADO] Entender mejor el concepto del Margin, Border, Padding y Content

lea87 · #1 (**permalink**) 04/09/2015, 21:22

Buenas a todos, estoy leyendo hacerca de las hojas de estilo y me cuesta entender el concepto del "modelo de caja o box model", se que hay cuatro elementos (Margin, Border, Padding y Content) y cada uno de estos tiene cuatro propiedades (Left, Right, Bottom y Top) ¿el tema es que no se cuando usar uno y cuándo usar oto? y además de esto tampoco se ¿cuál es el parámetro de cada uno de estos, digamos que no se cuándo finaliza uno y empieza el siguiente?

Por ejemplo, tengo dos archivos uno es un .html y otro un .css

En el archivo .html tengo lo siguiente:

Código:

<html>
<head>
<title>Prueba</title>
<link rel="StyleSheet" href="prueba.css" type="text/css">
<meta charset='utf-8'>
</head>
<body>
<p class="hola">Texto</p>
<p class="hola1">Texto</p>
<p class="hola2">Texto</p>
<p class="hola3">Texto</p>
</body>
</html>

En el archivo .css tengo lo siguiente:

Código:

.hola { 
  border: red 2px solid;
}
.hola1 { 
  margin: blue 2px solid;
}
.hola2 { 
  padding: black 2px solid;
}
.hola3 { 
  content: grey 2px solid;
}

Lo hice de esta forma para que me intenten explicar justamente lo que no entiendo. Acaso no deberían todos imprimirse por pantalla un recuadro con el texto dentro??

Espero que me puedan sacar de la duda. Saludos.

AngelKrak · #2 (**permalink**) 04/09/2015, 22:04

amigo si quieres informarte bien completamente te invito a que leas bien el documento completo de sus Respectivas Propiedades ;)

Te explicare un Poco sobre lo que yo entiendo por eso ;)

Border:
Seria el Bordeado de dicho elemento(Linea "Delgada" de cada Cuadro[Div] Alrededor) por ejemplo si te fijas en FDW Toda la pagina tiene "diferentes" Bordes en cada "Sección".

Margin:
Es el Margen(Espacio) Exterior para no tener todos Nuestros Div's Juntos y darles mas Espacio según a donde queramos.

Padding:
Es el Margen(Espacio) Interior para que nuestro contenido o en dicho caso el texto no quede tan Pegado al Container y tenga espacio por dentro.

Content:
Y por ultimo la Propiedad Content, no estoy muy familiarizado con ella por lo tanto no sabría decirte mucho pero lo que se es que es usada para los pseudo-elementos, no creo ni he visto que sirve en otra propiedad, Total... Con esa propiedad puedes "Generar" Contenido por asi decirlo.

fede5426 · #3 (**permalink**) 04/09/2015, 22:31

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

pzin · #4 (**permalink**) 05/09/2015, 12:08

Los valores en shorthands en CSS también puedes ser tres:

Código CSS:

Ver originalmargin: 1px 2px 3px;

Que sería igual a:

Código CSS:

Ver originalmargin: 1px 2px 3px 2px;

siddartha23 · #5 (**permalink**) 05/09/2015, 19:12

Es muy fácil: crea un div con fondo gris y escribe un párrafo dentro de él, verás que los textos están pegados al borde, ahora añádele padding: 15px; y el párrafo se separa del borde como una especie de marco, luego añádele un borde: 1px solid black; y ese recuadro va tener un color de borde. Por último copia y pega el div con el párrafo, el segundo div que creaste esta pegado al otro div, para separarlos les pones margin: 8px;. Para eso sirve cada uno de ellos, el "content" no es más que el contenido que ocupa el párrafo...

fede5426 · #6 (**permalink**) 05/09/2015, 19:21

Cita:

Iniciado por pzin

Los valores en shorthands en CSS también puedes ser tres

Ya lo había mencionado en mi respuesta

Cita:

Iniciado por siddartha23

... el "content" no es más que el contenido que ocupa el párrafo...

Error, el contenido de un elemento no es lo mismo que la propiedad "content".

siddartha23 · #7 (**permalink**) 07/09/2015, 20:11

Cita:

Iniciado por fede5426

Error, el contenido de un elemento no es lo mismo que la propiedad "content".

Error, se sobreentiende por el contexto de la pregunta que la duda del usuario se refiere al content dentro del box model y no a la propiedad "content" de css...

fede5426 · #8 (**permalink**) 08/09/2015, 18:53

Cita:

Iniciado por siddartha23

Error, se sobreentiende por el contexto de la pregunta que la duda del usuario se refiere al content dentro del box model y no a la propiedad "content" de css...

Cita:

Iniciado por lea87

.hola3 {
content: grey 2px solid;
}

El contexto dice que habla de una propiedad CSS.

Todo bien, no contesté para discutir solo para no confundir al usuario que preguntó.

siddartha23 · #9 (**permalink**) 08/09/2015, 19:19

Cita:

Iniciado por fede5426

El contexto dice que habla de una propiedad CSS.

Todo bien, no contesté para discutir solo para no confundir al usuario que preguntó.

Todo lo contrario, mientras mas se discute un tema mas posibilidades hay de que resuelva su duda. Nuestro amigo no comprende el box model y erróneamente pone el término "content" para ver como le afecta al box model de su párrafo. Lo bueno es que ya se explicó que la propiedad content tiene otras funciones.

Ojalá se manifieste al menos para decir gracias