Scribd
Upload
30 views3 pages

Learn CSS - The Box Model Cheatsheet - Codecademy

The document provides a comprehensive overview of key CSS concepts, including the box model, margin collapse, the auto keyword for centering elements, overflow handling, maximum and minimum dimensions, and the visibility property. It explains how the box-sizing property affects element sizing and discusses margin collapse behavior for vertical margins. Additionally, it covers how to manage content overflow and set visibility without altering the page structure.

Uploaded by

Gibril sonko
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views3 pages

Learn CSS - The Box Model Cheatsheet - Codecademy

The document provides a comprehensive overview of key CSS concepts, including the box model, margin collapse, the auto keyword for centering elements, overflow handling, maximum and minimum dimensions, and the visibility property. It explains how the box-sizing property affects element sizing and discusses margin collapse behavior for vertical margins. Additionally, it covers how to manage content overflow and set visibility without altering the page structure.

Uploaded by

Gibril sonko
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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 property
box-sizing: border-box;
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 #box-example {


property for an element corresponds directly to the
box-sizing: border-box;
element’s 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 .
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 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 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.
Height and Width Maximums/Minimums

The CSS min-width and min-height /* Any element with class "column" will be
properties can be used to set a minimum width and
at most 200 pixels wide, despite the width
minimum height of an element’s box. CSS max-width
and max-height properties can be used to set property value of 500 pixels. */
maximum widths and 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

You might also like