Scribd
Upload
85 views

Learn CSS - The Box Model Cheatsheet - Codecademy

The box model describes how CSS treats margins, borders, padding, and content. Margin collapse occurs when vertical margins of blocks combine into the largest margin. The auto keyword horizontally centers elements. Overflow determines how browsers handle content that exceeds container size. Min/max properties set size limits. Visibility hides elements without affecting layout. Border-box sizing includes padding and borders in element size.

Uploaded by

Claudiu Stefan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
85 views

Learn CSS - The Box Model Cheatsheet - Codecademy

The box model describes how CSS treats margins, borders, padding, and content. Margin collapse occurs when vertical margins of blocks combine into the largest margin. The auto keyword horizontally centers elements. Overflow determines how browsers handle content that exceeds container size. Min/max properties set size limits. Visibility hides elements without affecting layout. Border-box sizing includes padding and borders in element size.

Uploaded by

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

Cheatsheets / Learn CSS

The Box Model


CSS Margin Collapse
CSS margin collapse occurs when the top and bottom
margins of blocks are combined into a single margin /* The vertical margins will collapse to
equal to the largest individual block margin. 30 pixels
Margin collapse only occurs with vertical margins, not for instead of adding to 50 pixels. */
horizontal margins. .block-one {
margin: 20px;
}

.block-two {
margin: 30px;
}

CSS auto keyword


The value auto can be used with the property
margin to horizontally center an element within its div {
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
overflow property will determine how the browser small-block {
handles the problem. overflow: scroll;
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.

CSS height and width maximums and minimums


The CSS min-width and min-height properties
can be used to set a minimum width and minimum /* Any element with class "column" will be
height of an element’s box. CSS max-width and at most 200 pixels wide, despite the width
max-height properties can be used to set maximum property value of 500 pixels. */
widths and heights for element boxes.
.column {
max-width: 200px;
width: 500px;
}
The visibility Property
The CSS visibility property is used to render
hidden objects invisible to the user, without .invisible-elements {
removing them from the page. This ensures that the visibility: hidden;
page structure and organization remain unchanged. }

The property box-sizing of CSS box model


The CSS box model is a box that wraps around an HTML
element and controls the design and layout. The .container {
property box-sizing controls which aspect of the box-sizing: border-box;
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 for an element corresponds directly to the #box-example {
element’s total rendered size, including padding and box-sizing: border-box;
border with the height and width properties. }
The default value of the border-box 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 .

You might also like