CSS properties related to the box model

Articles

This article explains the CSS properties related to the box model.

You can learn about the use cases and syntax for properties like width, height, and margin.

YouTube Video

HTML for Preview

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>

Box Model Related

`width` and `height` Properties

 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}

The width and height properties are CSS properties used to specify the width and height of an element. These are particularly used when setting the size of block elements, images, videos, etc.

In the width-height-fixed class, fixed values are specified for width and height.
In the width-height-percent class, percentage values are specified for width and height.

Values that can be specified

The width and height properties can have the following values.

auto: Default size. Automatically adjusts the size relative to the parent element.
Fixed values: Specifies a fixed width in pixels, percentages, or relative units.(ex: 100px, 50%, 10rem)
- For example, 250px sets the element size to 250 pixels, and 50% sets it to 50% of the parent element's size.
min-content: Fits the minimum size of the content.
max-content: Fits the maximum size of the content.
fit-content: Adjusts the element's size appropriately based on the content's size.

Specifying Minimum and Maximum Values

min-width, max-width, min-height, and max-height are CSS properties used to set size constraints regarding the width and height of an element. Using these, you can ensure that an element stays within a specific size range.

`margin` and `padding` properties

 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 and padding are properties used in CSS to control the outer and inner spacing of elements within the box model. They are used to adjust the space between elements and to tidy up appearances.

In the margin-padding class, both margin and padding are specified. There is margin space outside the solid border and padding space inside the solid border.
In the margin-only class, only margin is specified. You can see that the blue area is smaller compared to the margin-padding class because there is no padding space inside the solid border.
In the no-margin class, both margin and padding are set to 0. You can see that the blue area is pushed all the way to the left because there is no margin space outside of the solid border.

In this way, the margin property sets the outer space of an element, adjusting the distance between elements. On the other hand, the padding property sets the inner space of an element, adjusting the distance between the content and the border.

`margin` property

The margin property sets the outer space (margin) of an element. It is used to create space between adjacent elements. The following values can be specified:.
Fixed values: You can specify the size of the margin in pixels, relative units (em, rem), or percentages.(ex: 10px, 1em, 5%)
auto: Useful for centering block elements. When the width is specified, it automatically adjusts the left and right margins.
Positive and negative values: Positive values expand the space, while negative values bring elements closer together.

Shorthand notation:

 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}

The margin property can take from one to four values.

One value: Applies to all sides.
Two values: The first applies to top and bottom, the second to left and right.
Three values: Applies in the order of top, left and right, bottom.
Four values: Applies in the order of top, right, bottom, left.

`padding` property

Function:

The padding property sets the inner space (padding) of an element. It is used to create space between the content and the border of an element. The following values can be specified:.
Fixed values: Specifies the size of the padding.(ex: 10px, 1em, 5%)
Negative values cannot be used. Padding values can only be specified as positive numbers.

Shorthand notation:

 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}

Like margin, you can specify from one to four values.

One value: Applies to all sides.
Two values: The first applies to top and bottom, the second to left and right.
Three values: Applies in the order of top, left and right, bottom.
Four values: Applies in the order of top, right, bottom, left.

`box-sizing` property

 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 is a CSS property that controls how the width and height of an element are calculated.

In the content-box class, the width of the element is 360px. The width is 300px, with left and right padding totaling 40px and left and right border totaling 20px, making a total of 360px.
In border-box, the width of the element is 300px. padding and border are included in the specified width.

Values of `box-sizing`

There are mainly two values for box-sizing: content-box and border-box, with content-box being the default value.

`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*/

When content-box is specified, only the content width and height are set by width and height. padding and border are added to it to determine the final size. In other words, width and height refer only to the content area.

In this example, the specified width is 200px, but with the widths of left and right padding and border added, the final actual width of the element is 260px.

`border-box`

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

When border-box is specified, width and height are calculated including padding and border. In other words, the specified width and height become the total size of the content, padding, and border.

In this case, the specified width is 200px, and since padding and border are also included, the final actual width of the element remains 200px. padding and border are adjusted within it.

Summary of `box-sizing` differences

Property	Calculation Method	Actual Width Calculation
`content-box` (default)	`width` refers to content only. `padding` and `border` are added.	`width` + `padding` + `border`
`border-box`	`width` is everything (includes content, `padding`, `border`)	The specified `width` is used as is.

Advantages of `box-sizing`

Using border-box stabilizes the layout. Adding padding or border does not change the specified size, making calculations simple.
It is useful when creating flexible layouts. In responsive designs or complex layouts, border-box is often used to avoid unexpected size fluctuations.

How to apply `border-box` globally

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

By setting CSS in this way, you can apply border-box to all elements to avoid unexpected size changes.

Summary

box-sizing controls whether padding and border are included in an element's width and height.
Using border-box makes size calculations easier and is suitable for responsive design.

`visibility` property

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

The visibility property is used to show or hide elements, but unlike the display property, it affects the layout even if the element is hidden. It only hides the element, retaining its original position and size without affecting the layout of other elements.

Basic Syntax

1element {
2    visibility: value;
3}

value: A value that specifies the visibility of the element.

Value types

The visibility property can be set to the following values:.

`visible`

Specifying visible will display the element. This is the default value.

`hidden`

Specifying hidden will hide the element but its layout space will be reserved.

`collapse`

collapse is mainly used for table rows or columns. The element becomes invisible and its space is also ignored. When applied to table rows or columns, the hidden rows or columns are completely removed from the layout.
However, when used on regular block or inline elements, except table elements, it behaves like hidden and the layout space is retained.

`inherit`

Specifying inherit will inherit the visibility property value from the parent element.

Differences between `visibility` and `display`

There are the following differences between visibility and display.

visibility: hidden hides the element but retains its space and layout.
display: none completely removes the element from the layout, allowing other elements to fill that space.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

CSS Properties for Code Display and Quotations Background-related CSS properties

CSS properties related to the box model

YouTube Video

HTML for Preview

Box Model Related

width and height Properties

Values that can be specified

Specifying Minimum and Maximum Values

margin and padding properties

margin property

Shorthand notation:

padding property

Function:

Shorthand notation:

box-sizing property

Values of box-sizing

content-box

border-box

Summary of box-sizing differences

Advantages of box-sizing

How to apply border-box globally

Summary

visibility property

Basic Syntax

Value types

visible

hidden

collapse

inherit

Differences between visibility and display

YouTube Video

`width` and `height` Properties

`margin` and `padding` properties

`margin` property

`padding` property

`box-sizing` property

Values of `box-sizing`

`content-box`

`border-box`

Summary of `box-sizing` differences

Advantages of `box-sizing`

How to apply `border-box` globally

`visibility` property

`visible`

`hidden`

`collapse`

`inherit`

Differences between `visibility` and `display`