Propiedades de CSS relacionadas con el modelo de caja

Articles

Este artículo explica las propiedades de CSS relacionadas con el modelo de caja.

Puedes aprender sobre los casos de uso y la sintaxis de propiedades como width, height y margin.

YouTube Video

HTML para vista previa

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

Relacionado con el modelo de caja

Propiedades `width` y `height`

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

Las propiedades width y height son propiedades de CSS utilizadas para especificar el ancho y el alto de un elemento. Estas se utilizan especialmente para establecer el tamaño de elementos de bloque, imágenes, videos, etc.

En la clase width-height-fixed, se especifican valores fijos para el ancho y el alto.
En la clase width-height-percent, se especifican valores porcentuales para el ancho y el alto.

Valores que se pueden especificar

Las propiedades width y height pueden tener los siguientes valores.

auto: Tamaño predeterminado. Ajusta automáticamente el tamaño en relación con el elemento padre.
Valores fijos: Especifica un ancho fijo en píxeles, porcentajes o unidades relativas.(ex: 100px, 50%, 10rem)
- Por ejemplo, 250px fija el tamaño del elemento a 250 píxeles, y 50% lo fija al 50% del tamaño del elemento padre.
min-content: Se ajusta al tamaño mínimo del contenido.
max-content: Se ajusta al tamaño máximo del contenido.
fit-content: Ajusta el tamaño del elemento apropiadamente según el tamaño del contenido.

Especificar Valores Mínimos y Máximos

min-width, max-width, min-height y max-height son propiedades de CSS utilizadas para establecer restricciones de tamaño respecto al ancho y alto de un elemento. Usando estas propiedades, puedes asegurarte de que un elemento permanezca dentro de un rango de tamaño específico.

Propiedades `margin` y `padding`

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

Margin y padding son propiedades utilizadas en CSS para controlar el espacio externo e interno de los elementos dentro del modelo de caja. Se utilizan para ajustar el espacio entre elementos y mejorar la apariencia.

En la clase margin-padding, se especifican tanto margin como padding. Hay un espacio margin fuera del borde sólido y un espacio padding dentro del borde sólido.
En la clase margin-only, solo se especifica el margin. Puedes ver que el área azul es más pequeña en comparación con la clase margin-padding porque no hay espacio de padding dentro del borde sólido.
En la clase no-margin, tanto el margin como el padding se establecen en 0. Puedes ver que el área azul se desplaza completamente hacia la izquierda porque no hay espacio de margin fuera del borde sólido.

De esta manera, la propiedad margin establece el espacio exterior de un elemento, ajustando la distancia entre los elementos. Por otro lado, la propiedad padding establece el espacio interior de un elemento, ajustando la distancia entre el contenido y el borde.

Propiedad `margin`

La propiedad margin establece el espacio exterior (margen) de un elemento. Se utiliza para crear espacio entre elementos adyacentes. Se pueden especificar los siguientes valores:.
Valores fijos: Puedes especificar el tamaño del margen en píxeles, unidades relativas (em, rem) o porcentajes.(ex: 10px, 1em, 5%)
auto: Útil para centrar elementos de bloque. Cuando se especifica el ancho, ajusta automáticamente los márgenes izquierdo y derecho.
Valores positivos y negativos: Los valores positivos amplían el espacio, mientras que los valores negativos acercan los elementos.

Notación abreviada:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

La propiedad margin puede tomar de uno a cuatro valores.

Un valor: Se aplica a todos los lados.
Dos valores: El primero se aplica a arriba y abajo, el segundo a izquierda y derecha.
Tres valores: Se aplica en el orden de arriba, izquierda y derecha, abajo.
Cuatro valores: Se aplica en el orden de arriba, derecha, abajo, izquierda.

Propiedad `padding`

Función:

La propiedad padding establece el espacio interior (relleno) de un elemento. Se utiliza para crear espacio entre el contenido y el borde de un elemento. Se pueden especificar los siguientes valores:.
Valores fijos: Especifica el tamaño del relleno.(ex: 10px, 1em, 5%)
No se pueden usar valores negativos. Los valores de relleno solo pueden especificarse como números positivos.

Notación abreviada:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

Al igual que margin, puedes especificar entre uno y cuatro valores.

Un valor: Se aplica a todos los lados.
Dos valores: El primero se aplica a arriba y abajo, el segundo a izquierda y derecha.
Tres valores: Se aplica en el orden de arriba, izquierda y derecha, abajo.
Cuatro valores: Se aplica en el orden de arriba, derecha, abajo, izquierda.

Propiedad `box-sizing`

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing es una propiedad de CSS que controla cómo se calculan el ancho y el alto de un elemento.

En la clase content-box, el ancho del elemento es de 360px. El width es 300px, con padding izquierdo y derecho que suman 40px y border izquierdo y derecho que suman 20px, haciendo un total de 360px.
En border-box, el ancho del elemento es de 300px. padding y border están incluidos en el width especificado.

Valores de `box-sizing`

Principalmente hay dos valores para box-sizing: content-box y border-box, siendo content-box el valor predeterminado.

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

Cuando se especifica content-box, solo el ancho y el alto del contenido son configurados por width y height. padding y border se añaden para determinar el tamaño final. En otras palabras, width y height se refieren solo al área de contenido.

En este ejemplo, el width especificado es de 200px, pero sumando los anchos de padding y border izquierdo y derecho, el ancho final real del elemento es de 260px.

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

Cuando se especifica border-box, width y height se calculan incluyendo padding y border. En otras palabras, el width y height especificados se convierten en el tamaño total del contenido, padding y border.

En este caso, el width especificado es de 200px, y como padding y border también están incluidos, el ancho real final del elemento sigue siendo de 200px. padding y border se ajustan dentro de él.

Resumen de las diferencias de `box-sizing`

Propiedad	Método de Cálculo	Cálculo del Ancho Real
`content-box` (predeterminado)	`width` se refiere solo al contenido. Se añaden `padding` y `border`.	`width` + `padding` + `border`
`border-box`	`width` incluye todo (contenido, `padding`, `border`)	El ancho especificado se utiliza tal cual.

Ventajas de `box-sizing`

El uso de border-box estabiliza el diseño. Añadir padding o border no cambia el tamaño especificado, haciendo los cálculos más sencillos.
Es útil al crear diseños flexibles. En diseños responsivos o diseños complejos, se suele usar border-box para evitar fluctuaciones inesperadas en el tamaño.

Cómo aplicar `border-box` globalmente

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

Al configurar CSS de esta manera, puedes aplicar border-box a todos los elementos para evitar cambios inesperados de tamaño.

Resumen

box-sizing controla si padding y border están incluidos en el width y height de un elemento.
Usar border-box facilita los cálculos de tamaño y es adecuado para diseños responsivos.

Propiedad `visibility`

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

La propiedad visibility se utiliza para mostrar u ocultar elementos, pero a diferencia de la propiedad display, afecta el diseño incluso si el elemento está oculto. Solo oculta el elemento, conservando su posición y tamaño originales sin afectar el diseño de los demás elementos.

Sintaxis Básica

1element {
2    visibility: value;
3}

value: Un valor que especifica la visibilidad del elemento.

Tipos de valor

La propiedad visibility puede configurarse en los siguientes valores:.

`visible`

Especificar visible mostrará el elemento. Este es el valor predeterminado.

`hidden`

Especificar hidden ocultará el elemento, pero su espacio en el diseño se mantendrá reservado.

`collapse`

collapse se utiliza principalmente para filas o columnas de tablas. El elemento se vuelve invisible y también se ignora su espacio. Cuando se aplica a filas o columnas de tablas, las filas o columnas ocultas se eliminan completamente del diseño.
Sin embargo, cuando se utiliza en elementos de bloque o en línea normales, excepto en elementos de tabla, se comporta como hidden y el espacio en el diseño se conserva.

`inherit`

Especificar inherit heredará el valor de la propiedad visibility del elemento padre.

Diferencias entre `visibility` y `display`

Existen las siguientes diferencias entre visibility y display:.

visibility: hidden oculta el elemento pero conserva su espacio y diseño.
display: none elimina completamente el elemento del diseño, permitiendo que otros elementos ocupen ese espacio.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades de CSS para la visualización de código y citas Propiedades de CSS relacionadas con el fondo

Propiedades de CSS relacionadas con el modelo de caja

YouTube Video

HTML para vista previa

Relacionado con el modelo de caja

Propiedades width y height

Valores que se pueden especificar

Especificar Valores Mínimos y Máximos

Propiedades margin y padding

Propiedad margin

Notación abreviada:

Propiedad padding

Función:

Notación abreviada:

Propiedad box-sizing

Valores de box-sizing

content-box

border-box

Resumen de las diferencias de box-sizing

Ventajas de box-sizing

Cómo aplicar border-box globalmente

Resumen

Propiedad visibility

Sintaxis Básica

Tipos de valor

visible

hidden

collapse

inherit

Diferencias entre visibility y display

YouTube Video

Propiedades `width` y `height`

Propiedades `margin` y `padding`

Propiedad `margin`

Propiedad `padding`

Propiedad `box-sizing`

Valores de `box-sizing`

`content-box`

`border-box`

Resumen de las diferencias de `box-sizing`

Ventajas de `box-sizing`

Cómo aplicar `border-box` globalmente

Propiedad `visibility`

`visible`

`hidden`

`collapse`

`inherit`

Diferencias entre `visibility` y `display`