Scribd
Upload
20 views

Learn CSS - The Box Model Cheatsheet - Codecademy

The document discusses the CSS box model and various CSS box properties. It covers the box-sizing property which controls how the width and height of elements are calculated. It also covers margin collapse, using auto for horizontal centering, overflow handling, min/max height and width, and the visibility property. The box model is a box that wraps HTML elements and controls design and layout. The box-sizing property determines if width and height include padding and borders.

Uploaded by

manojschavan6
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Learn CSS - The Box Model Cheatsheet - Codecademy

The document discusses the CSS box model and various CSS box properties. It covers the box-sizing property which controls how the width and height of elements are calculated. It also covers margin collapse, using auto for horizontal centering, overflow handling, min/max height and width, and the visibility property. The box model is a box that wraps HTML elements and controls design and layout. The box-sizing property determines if width and height include padding and borders.

Uploaded by

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

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

You might also like