Scribd
Upload
4 views

Learn CSS_ The Box Model Cheatsheet _ Codecademy

The document is a cheatsheet for the CSS box model, detailing properties such as box-sizing, margin collapse, and overflow handling. It explains the difference between content-box and border-box values for box-sizing, as well as how to use the auto keyword for centering elements. Additionally, it covers setting maximum and minimum dimensions for elements and the visibility property to hide elements without removing them from the layout.

Uploaded by

Nagabhushan Nagabhushan m k
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Learn CSS_ The Box Model Cheatsheet _ Codecademy

The document is a cheatsheet for the CSS box model, detailing properties such as box-sizing, margin collapse, and overflow handling. It explains the difference between content-box and border-box values for box-sizing, as well as how to use the auto keyword for centering elements. Additionally, it covers setting maximum and minimum dimensions for elements and the visibility property to hide elements without removing them from the layout.

Uploaded by

Nagabhushan Nagabhushan m k
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

2/6/25, 12:04 PM 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
2/6/25, 12:04 PM 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
2/6/25, 12:04 PM 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

You might also like