Cómo organizar el diseño de su página web con el modelo de caja
Las propiedades de margen , borde y relleno de CSS se utilizan en cualquier elemento HTML dado para crear un efecto único. Trabajan juntos para garantizar que su página web esté organizada y presentable.
De estas tres propiedades, la propiedad de borde puede parecer más familiar, ya que generalmente se identifica fácilmente en una página web. Sin embargo, el uso de la propiedad de borde no se vería tan presentable como en la mayoría de los sitios web si el desarrollador no editara también las propiedades de relleno y margen .
En este tutorial, aprenderá sobre el modelo de caja y cómo cada una de sus capas funciona en conjunto para organizar el contenido en un sitio web.
¿Qué es el modelo de caja CSS?
El modelo de caja CSS es esencialmente una caja que encierra cada elemento HTML. El modelo de caja consta de cuatro capas (como puede ver en la imagen de abajo), y cada capa tiene un propósito único.
La primera capa se encuentra en el centro del modelo de caja. Esta es la posición dada a cada elemento HTML. En la imagen de arriba, el valor auto x auto se muestra actualmente desde la posición central, pero este valor se reemplazará con el ancho x alto de cada elemento HTML.
La propiedad de relleno se encuentra entre el elemento HTML y la propiedad de borde , y la propiedad de margen se encuentra en el lado exterior de la propiedad de borde . Las propiedades de relleno y borde no suelen tener valores predeterminados visibles para un elemento CSS determinado. Sin embargo, se encuentra un valor de propiedad de margen predeterminado en algunos elementos HTML, a saber, el elemento p , que tiene un valor predeterminado de 16px tanto en la parte superior como en la inferior.
Usando la propiedad de margen CSS
La propiedad margin tiene cuatro subpropiedades, a saber, margin-top , margin-right , margin-bottom y margin-left . Estas propiedades se utilizan individualmente para crear el tamaño de margen deseado en un lado específico de un elemento, o como un grupo simplemente usando la propiedad de margen abreviado.
Estructura de la propiedad de margen
Selector {
margin: margin-top margin-right margin-left margin-bottom;
}El ejemplo anterior representa la estructura básica de la propiedad de margen . El primer valor en la pila de valores asignado a la propiedad de margen apunta a la parte superior, el segundo valor apunta a la derecha, el tercero apunta a la izquierda y el cuarto apunta a la parte inferior de un elemento.
Ejemplo de uso del margen de propiedad
p{
margin: 20px 10px 20px 10px;
}El código anterior asigna efectivamente un margen de 20px en la parte superior, 10px a la derecha, 20px en la parte inferior y 10px a la izquierda de todos los elementos p en una página web específica. Sin embargo, el mismo efecto que produce el código anterior se puede lograr con menos código:
p{
margin: 20px 10px;
}El código anterior producirá el mismo resultado que el fragmento de código anterior. El primer valor asignado a la propiedad de margen apuntará a la parte superior e inferior, y el segundo valor apuntará a los lados derecho e izquierdo de todos los elementos p en una página web.
Si hay un caso en el que el margen que se debe asignar a los cuatro lados de un elemento HTML es el mismo, puede usar el siguiente código para lograrlo:
p{
margin: 20px;
}El código anterior asigna un margen de 20px a los cuatro lados de los elementos p en una página web.
Desembalaje de la propiedad de borde CSS
En el modelo de caja CSS, la propiedad del borde es la tercera capa. Al igual que el margen , la propiedad de borde tiene varias subpropiedades que puede usar en un valor de pila. Pero, a diferencia de la propiedad de margen , no todas las subpropiedades de borde deben estar presentes para que la propiedad de borde funcione correctamente. Solo hay una propiedad que debe estar presente: la propiedad de estilo de borde .
Ejemplo de estructura de propiedad de borde básico
Selector{
border: border-style;
}La propiedad de estilo de borde en el ejemplo anterior puede tomar la forma de uno de varios valores. Por ejemplo, si desea un borde sólido alrededor de todos los párrafos de su página web, el siguiente código puede ayudar:
p{
border: solid;
}La propiedad de borde también permite a un desarrollador apuntar a lados específicos de un elemento HTML con las siguientes cuatro subpropiedades:
- borde izquierdo
- borde derecho
- borde superior
- borde inferior
Si alguna vez hay una instancia en la que necesita colocar un borde en un solo lado de un elemento, puede usar la subpropiedad apropiada de la lista anterior.
Desembalaje de la propiedad de estilo de borde
Aunque no siempre es visible, todos los elementos HTML están rodeados por la propiedad de borde . Su incapacidad para ver la propiedad de borde en algunos casos se debe a que el valor predeterminado de la propiedad de estilo de borde es ninguno. Puede asignar muchos valores diferentes a la propiedad de estilo de borde , siendo algunos de los más populares:
- sólido
- doble
- punteado
- pizca
Usar la propiedad de borde con un valor de pila
Se pueden asignar tres valores a la propiedad de borde para lograr un resultado específico. Estos valores son las propiedades de ancho de borde, estilo de borde y color de borde . Por lo tanto, si desea crear un borde rojo sólido alrededor de un párrafo con un ancho de 2px, el siguiente código lo logrará:
p{
border: 2px solid red;
}También puede usar el valor de la pila en un lado de un elemento reemplazando la propiedad de borde en el ejemplo anterior con la subpropiedad que apunta al lado apropiado. Por ejemplo, si desea apuntar solo al lado izquierdo de todos los párrafos con el mismo valor de pila anterior, simplemente puede reemplazar "borde" en el ejemplo anterior con la propiedad "borde izquierdo".
Uso de la propiedad de relleno CSS
La propiedad de relleno CSS es muy similar a la propiedad margin . La propiedad padding tiene cuatro subpropiedades, padding-top , padding-right , padding-bottom y padding-left . Puede usar cada subpropiedad individualmente o alimentarlas como un valor de pila para la propiedad de relleno .
Al igual que el margen , si solo se asignan dos valores a la propiedad de relleno , el primero apuntará a los lados superior e inferior del elemento, y el segundo apuntará a los lados izquierdo y derecho. Si solo se proporciona un valor, todos los lados tendrán el mismo tamaño de relleno .
Los siguientes tres conjuntos de código producirán el mismo resultado en todos los elementos p de una página web.
Usar cuatro valores de relleno
p{
padding: 20px 20px 20px 20px;
}Usar dos valores de relleno
p{
padding: 20px 20px;
}Usar un valor de relleno
p{
padding: 20px 20px;
}Usando el modelo de caja CSS
El uso de las propiedades de borde , margen y relleno lo ayudará a organizar su página web, sin importar qué tipo de página sea. A continuación, le indicamos cómo usarlos en conjunto:
Ejemplo de documento HTML básico
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Box Model</title>
</head>
<body>
<div class="box">
<h1>Heading One</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
</p>
</div>
<div class="box">
<h1>Heading Two</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
</p>
</div>
</body>
</html>
El código anterior producirá el siguiente resultado en el navegador:
La imagen de arriba muestra dos elementos div , cada uno de los cuales contiene un encabezado y un párrafo. Cada elemento div tiene un margen , borde y relleno de 0px, un ancho de 1042px y una altura de 112.438px como puede ver en el modelo de cuadro a continuación.
El uso de la propiedad de borde proporciona una perspectiva más clara de lo que está sucediendo en la página.
Usando la propiedad de borde
.box{
border: solid;
}El uso del código CSS anterior producirá el siguiente resultado en su navegador:
Ahora que la propiedad del borde está visible, tiene un ancho predeterminado de 3px, como se ve en el modelo de cuadro a continuación.
Como puede ver en el modelo de caja anterior, la propiedad de margen está en el lado exterior del borde . Por lo tanto, puede usarlo para crear algo de espacio entre los dos elementos div que se tocan.
Usando la propiedad margin
.box{
border: solid;
margin: 20px;
}Al introducir el margen con el código anterior, se creará el siguiente resultado en su navegador:
Eso es un poco mejor, ¿no? Hay suficiente espacio entre los elementos div . Todos los lados de cada elemento div ahora tienen un margen de 20px, como puede ver en el modelo de cuadro a continuación.
Ahora puede enfocarse en el interior del borde, que es donde cae la propiedad de relleno en el modelo de caja.
Usando la propiedad de relleno
.box{
border: solid;
margin: 20px;
padding: 10px;
}El código anterior producirá el siguiente resultado en su navegador:
Como puede ver en la imagen de arriba, el texto dentro del borde ahora se ha alejado de los bordes debido a la propiedad de relleno . El modelo de caja a continuación muestra que todas las capas del modelo de caja están ahora en uso.
Experimente con propiedades CSS
Ahora comprende el modelo de caja y cómo cada elemento dentro de él trabaja en conjunto para lograr un resultado específico. Puede intentar asignar un valor de pila a la propiedad del borde y cambiar el color del borde a rojo, o puede reemplazar la propiedad del borde con su subpropiedad del borde izquierdo y ver qué sucede.
Hay muchas otras propiedades de CSS para explorar, y con la hoja de trucos de CSS, puede experimentar con cada una de ellas.