Scribd
Upload
44 views

The Box Model in CSS

The box model document discusses key CSS box model concepts including: 1. Margin collapse which occurs when top and bottom margins of blocks combine into a single margin equal to the largest individual block margin. 2. Using the CSS auto keyword to horizontally center elements within their container by splitting the remaining space equally between left and right margins. 3. The overflow property which determines how browsers handle content that is too large for its container, allowing it to be visible, hidden, or accessible via scroll bars. 4. The min-height, min-width, max-height and max-width properties for setting minimum and maximum heights and widths of element boxes.

Uploaded by

Abdul Quayum Alli
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

The Box Model in CSS

The box model document discusses key CSS box model concepts including: 1. Margin collapse which occurs when top and bottom margins of blocks combine into a single margin equal to the largest individual block margin. 2. Using the CSS auto keyword to horizontally center elements within their container by splitting the remaining space equally between left and right margins. 3. The overflow property which determines how browsers handle content that is too large for its container, allowing it to be visible, hidden, or accessible via scroll bars. 4. The min-height, min-width, max-height and max-width properties for setting minimum and maximum heights and widths of element boxes.

Uploaded by

Abdul Quayum Alli
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 /* The vertical margins will collapse to
margins of blocks are combined into a single margin equal
30 pixels
to the largest individual block margin.
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 div {
to horizontally center an element within its container. The
margin: auto;
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 properties can /* Any element with class "column" will be
be used to set a minimum width and minimum height of
at most 200 pixels wide, despite the width
an element’s box. CSS max-width and max-height
properties can be used to set maximum widths and 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 hidden .invisible-elements {
objects invisible to the user, without removing them from
visibility: hidden;
the page. This ensures that the 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 .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 property for #box-example {
an element corresponds directly to the element’s total
box-sizing: border-box;
rendered size, including padding and 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 .

Save Print Share

You might also like