Scribd
Upload
22 views2 pages

Getting More Advanced With Design - The Box Model Cheatsheet - Codecademy

Box

Uploaded by

kimato suyaka
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
22 views2 pages

Getting More Advanced With Design - The Box Model Cheatsheet - Codecademy

Box

Uploaded by

kimato suyaka
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/ 2

Cheatsheets / Getting More Advanced with Design

The Box Model


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.

Height and Width Maximums/Minimums


The CSS min-width and min-height
properties can be used to set a minimum width and /* Any element with class "column" will
minimum height of an element’s box. CSS max- be at most 200 pixels wide, despite the
width and max-height properties can be used width property value of 500 pixels. */
to set maximum widths and heights for element boxes.
.column {
max-width: 200px;
width: 500px;
}

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
over owing content accessible via scroll bars within the
original container.

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. }

/
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 instead of adding to 50 pixels. */
for horizontal margins.
.block-one {
margin: 20px;
}

.block-two {
margin: 30px;
}

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