68 lines
3.9 KiB
Plaintext
68 lines
3.9 KiB
Plaintext
---
|
||
title: Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
|
||
---
|
||
|
||
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and optional surrounding `padding`, `border`, and `margin` areas.
|
||
|
||
The CSS box model is responsible for calculating:
|
||
|
||
- How much space a block element takes up.
|
||
- Whether or not borders and/or margins overlap, or collapse.
|
||
- A box's dimensions.
|
||
|
||
## Box Model Rules
|
||
|
||
- The dimensions of a block element are calculated by `width`, `height`, `padding`s, and `border`s.
|
||
- If no `height` is specified, a block element will be as high as the content it contains, plus `padding` (unless there are floats, for which, see [describe floats and how they work](/questions/quiz/describe-floats-and-how-they-work)).
|
||
- If no `width` is specified, a non-`float`-ed block element will expand to fit the width of its parent minus the `padding`, unless it has a `max-width` property set, in which case it will be no wider than the specified maximum width.
|
||
- Some block-level elements (e.g. `table`, `figure`, and `input`) have inherent or default width values, and may not expand to fill the full width of their parent container.
|
||
- Note: `span` is an inline-level element and does not have a default width, so it will not expand to fit.
|
||
- The `height` of an element is calculated by the content's `height`.
|
||
- The `width` of an element is calculated by the content's `width`.
|
||
- By default (`box-sizing: content-box`), `padding`s and `border`s are not part of the `width` and `height` of an element.
|
||
|
||
Note that `margin`s are not counted towards the actual size of the box. It affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the `border` — it does not extend into the `margin`.
|
||
|
||
## Extra
|
||
|
||
Look up the `box-sizing` property, which affects how the total heights and widths of elements are calculated.
|
||
|
||
- `box-sizing: content-box`: This is the default value of `box-sizing` and adheres to the rules above.
|
||
|
||
For example:
|
||
|
||
```css
|
||
.example {
|
||
box-sizing: content-box;
|
||
width: 100px;
|
||
padding: 10px;
|
||
border: 5px solid black;
|
||
}
|
||
```
|
||
|
||
The actual space taken by the `.example` element will be 130px wide (100px width + 10px left padding + 10px right padding + 5px left border + 5px right border).
|
||
|
||
- `box-sizing: border-box`: The `width` and `height` will include the content, padding and border (but not the margin). This is a much more intuitive way to think about boxes and hence many CSS frameworks (e.g. Bootstrap, Tailwind, Bulma) set `* { box-sizing: border-box; }` globally, so that all elements use such a box model by default. See the [question on `box-sizing: border-box`](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) for more information.
|
||
|
||
For example:
|
||
|
||
```css
|
||
.example {
|
||
box-sizing: border-box;
|
||
width: 100px;
|
||
padding: 10px;
|
||
border: 5px solid black;
|
||
}
|
||
```
|
||
|
||
The element will still take up 100px on the page, but the content area will be 70px wide (100px - 10px left padding - 10px right padding - 5px left border - 5px right border).
|
||
|
||
### Border and Margin Behavior
|
||
|
||
- **Borders do not collapse or overlap** with those of adjacent elements. Each element’s border is rendered individually.
|
||
- **Margins can collapse**, but only vertically and only between block-level elements. Horizontal margins do not collapse. This means that if one block element has a bottom margin and the next has a top margin, only the larger of the two will be used. This behavior is independent of `box-sizing` and is the default in CSS.
|
||
|
||
## References
|
||
|
||
- [The box model | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
|