12/26/23, 11:00 AM Learn CSS: The Box Model Cheatsheet | Codecademy
Cheatsheets / Learn CSS
The Box Model
The property box-sizing of CSS box model
The CSS box model is a box that wraps around an HTML .container {
element and controls the design and layout. The
box-sizing: border-box;
property box-sizing controls which aspect of the box
is determined by the height and width properties. }
The default value of this property is content-box ,
which renders the actual size of the element including
the content box; but not the paddings and borders. The
value border-box , on the other hand, renders the
actual size of an element including the content box,
paddings, and borders.
CSS box-sizing: border-box
The value border-box of the box-sizing property #box-example {
for an element corresponds directly to the element’s
box-sizing: border-box;
total rendered size, including padding and border with
the height and width properties. }
The default value of the box-sizing property is
content-box . The value border-box is
recommended when it is necessary to resize the
padding and border but not just the content. For
instance, the value border-box calculates an
element’s height as follows: height = content height
+ padding + border .
https://www.codecademy.com/learn/learn-css/modules/learn-css-box-model/cheatsheet 1/3
12/26/23, 11:00 AM Learn CSS: The Box Model Cheatsheet | Codecademy
CSS Margin Collapse
CSS margin collapse occurs when the top and bottom /* The vertical margins will collapse to
margins of blocks are combined into a single margin
30 pixels
equal to the largest individual block margin.
Margin collapse only occurs with vertical margins, not instead of adding to 50 pixels. */
for horizontal margins. .block-one {
margin: 20px;
}
.block-two {
margin: 30px;
}
CSS auto keyword
The value auto can be used with the property div {
margin to horizontally center an element within its
margin: auto;
container. The margin property will take the width of
the element and will split the rest of the space equally }
between the left and right margins.
Dealing with overflow
If content is too large for its container, the CSS small-block {
overflow property will determine how the browser
overflow: scroll;
handles the problem.
By default, it will be set to visible and the content will }
take up extra space. It can also be set to hidden , or to
scroll , which will make the overflowing content
accessible via scroll bars within the original container.
https://www.codecademy.com/learn/learn-css/modules/learn-css-box-model/cheatsheet 2/3
12/26/23, 11:00 AM Learn CSS: The Box Model Cheatsheet | Codecademy
Height and Width Maximums/Minimums
The CSS min-width and min-height properties can /* Any element with class "column" will
be used to set a minimum width and minimum height of
be at most 200 pixels wide, despite the
an element’s box. CSS max-width and max-height
properties can be used to set maximum widths and width property value of 500 pixels. */
heights for element boxes.
.column {
max-width: 200px;
width: 500px;
}
The visibility Property
The CSS visibility property is used to render .invisible-elements {
hidden objects invisible to the user, without removing
visibility: hidden;
them from the page. This ensures that the page
structure and organization remain unchanged. }
Print Share
https://www.codecademy.com/learn/learn-css/modules/learn-css-box-model/cheatsheet 3/3
