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>
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.