Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Entender mejor el concepto del Margin, Border, Padding y Content en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/09/2015, 21:22
 
Fecha de Ingreso: enero-2010
Mensajes: 50
Antigüedad: 14 años, 4 meses
Puntos: 0
Pregunta Entender mejor el concepto del Margin, Border, Padding y Content

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.
  #2 (permalink)  
Antiguo 04/09/2015, 22:04
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 6 meses
Puntos: 91
Respuesta: Entender mejor el concepto del Margin, Border, Padding y Content

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.
  #3 (permalink)  
Antiguo 04/09/2015, 22:31
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 6 meses
Puntos: 208
Respuesta: Entender mejor el concepto del Margin, Border, Padding y Content

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

Última edición por fede5426; 04/09/2015 a las 22:36
  #4 (permalink)  
Antiguo 05/09/2015, 12:08
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 10 meses
Puntos: 2114
Respuesta: Entender mejor el concepto del Margin, Border, Padding y Content

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

Código CSS:
Ver original
  1. margin: 1px 2px 3px;

Que sería igual a:

Código CSS:
Ver original
  1. margin: 1px 2px 3px 2px;
__________________
(:
  #5 (permalink)  
Antiguo 05/09/2015, 19:12
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 9 meses
Puntos: 39
Respuesta: Entender mejor el concepto del Margin, Border, Padding y Content

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...
__________________
velarde23.com - Soluciones Web
  #6 (permalink)  
Antiguo 05/09/2015, 19:21
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 6 meses
Puntos: 208
Respuesta: Entender mejor el concepto del Margin, Border, Padding y Content

Cita:
Iniciado por pzin Ver Mensaje
Los valores en shorthands en CSS también puedes ser tres
Ya lo había mencionado en mi respuesta

Cita:
Iniciado por siddartha23 Ver Mensaje
... 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".
  #7 (permalink)  
Antiguo 07/09/2015, 20:11
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 9 meses
Puntos: 39
Respuesta: Entender mejor el concepto del Margin, Border, Padding y Content

Cita:
Iniciado por fede5426 Ver Mensaje
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...
__________________
velarde23.com - Soluciones Web
  #8 (permalink)  
Antiguo 08/09/2015, 18:53
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 6 meses
Puntos: 208
Respuesta: Entender mejor el concepto del Margin, Border, Padding y Content

Cita:
Iniciado por siddartha23 Ver Mensaje
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ó.
  #9 (permalink)  
Antiguo 08/09/2015, 19:19
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 9 meses
Puntos: 39
Respuesta: Entender mejor el concepto del Margin, Border, Padding y Content

Cita:
Iniciado por fede5426 Ver Mensaje
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
__________________
velarde23.com - Soluciones Web

Etiquetas: border, content, html, margin, padding
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:05.