Box Model

What is Box Sizing?

The box-sizing is a property that governs how width, height, margin, border and padding properties impact the actual visual dimensions of a given element.

The box-sizing property can be set to:

• content-box, or

• border-box.

The third known box-sizing value is padding-box which is however as of now unsupported by most browsers.

In both - content and border box - models margin is not included in the width and height properties but still affects the actual space claimed by a given element.

Content Box

The default value of the box-sizing property of most HTML elements is content-box.

In content box model the width and height properties control only the element's content width and height and therefore padding and border increase the actual visual dimensions of the element box.

Border Box

The box-sizing property can be set to border-box instead of content-box.

In border box model the width and height properties control the element's content, padding and border width and height jointly.

Some HTML elements like table, select, button, radio input and checkbox input have the box-sizing property set to border-box by default.

To set all elements box-sizing property to border-box:

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

What is a Margin?

A margin is a space around an element box. It is not included in width nor height irrespective of the box-sizing value.

Margins can have both positive and negative values.

Controlling Margin

It is possible to control top, right, bottom, left margins simultaneously using the margin property or control each of the particular side margins using margin-top, margin-right, margin-bottom and margin-left.

p {
  margin: 15px 10px 5px 0; /* top 15px, right 10px, bottom 5px and left 0 */
}

p  {
  margin-top: 15px;
  margin-right: 10px;
  margin-right: 5px;
  margin-left: 0;
}

p {
  margin: 15px; /* top, right, bottom and left 15px */
}

p {
  margin: 15px 10px; /* top and bottom 15px, right and left 10px */
}

p {
  margin: 15px 10px 5px; /* top 15px, right and left 10px, bottom 5px */
}

Margin Collapsing

When top and bottom margins from two sibling non-floating and non-absolutely positioned element boxes meet they collapse into each other in the following manner:

• when both margins are positive the one furthest from zero is applied,

• when both margins are negative also the one furthest from zero is applied,

• when one margin is positive and one negative they are subtracted from each other.

Further, the top margin of a child element can collapse outside of the parent element when there is nothing before the child element. Similar behavior applies to the bottom margin.

What is a Border?

The border in the CSS box model is a line between the margin and the padding.

In the content-box model the border is not included in width and height.

In the border-box model the border is included in width and height.

Controlling Border

It is possible to control width, style and color properties of a border simultaneously using the border property or control each of them separately using border-style, border-width and border-color properties.

It is possible to control top, right, bottom, left borders simultaneously using the border property or control each of the particular side margins using border-top, border-right, border-bottom and border-left.

The border-width, border-style and border-color properties can be combined with border-top, border-right, border-bottom and border-left to target particular property and side, e.g. border-top-width.

p {
  border: 1px solid red;
}

p {
  border-width: 1px;
  border-style: solid; /* none, dotted, inset, dashed, double, groove */
  border-color: red;
}

p {
  border-style: solid;
  border-color: green;
  border-top: 2px solid blue;
  border-right: 5px dotted gray;
  border-bottom-width: 10px;
}

What is Padding?

Padding in the CSS box model is a space between the content and the border.

In the content-box model padding is not included in width and height.

In the border-box model padding is included in width and height.

A padding property can only have non-negative values.

Controlling Padding

It is possible to control top, right, bottom, left paddings simultaneously using the padding property or control each of the particular side paddings using padding-top, padding-right, padding-bottom and padding-left.

p {
  padding: 42px;
}

div {
  padding-top: 23px;
}

What is an Outer Display?

The outer display property denoted by the keyword display is a property that controls how a given box is visually presented (displayed) in relation to its ancestor element and its sibling elements.

The outer display property can have the following values:

• block,

• inline-block, and

• inline.

.abc {
  display: block;
}

In HTML some elements have display set to block by default and are known as non‑phrasing elements and some have display set to inline and are known as phrasing elements. See HTML Tutorial: Non-Phrasing v. Phrasing Content Elements for more details on the subject.

It is allowed to nest inline elements within block elements but it is not allowed to nest block elements within inline elements.

Block Display

An element with display property set to block:

• breaks onto a new container line,

• takes as much of the container line's space as available to it unless its width does not require it,

• has their width and height properties respected.

Inline-Block Display

An element with display property set to inline-block:

• does not break onto a new container line,

• takes only as much of the container's line or lines as is necessary due to its content or width,

• has its width, height, margin, and padding properties respected.

Inline Display

An element with display property set to inline:

• does not break onto a new container line,

• takes only as much of the container's line or lines as is necessary due to its content,

• has its width, height and vertical margin and padding properties not respected but horizontal margin and padding properties respected.

What is an Inner Display?

The inner display property denoted by the keyword display (just like the outer display) is a property that controls how statically and relatively positioned descendant elements of a given element are visually presented (displayed) within it and in relation to it and each other.

By default elements within an element with the display property set to block, inline-block or inline are presented due to the rules outlined above for the outer display which might be referred to as the normal flow. However, the display property can also be set to flex or grid (inline-flex or inline-grid alternatively) which sets the outer display to block (inline alternatively) but changes the inner display to respectively flex or grid behavior.

Flex

Descendant elements of an element that has its display property set to flex are automatically spatially unidirectionally (unidimensionally) - horizontally or vertically - arranged depending upon a container width and height.

Grid

Descendant elements of an element that has its display property set to grid are automatically spatially two‑directionally (two‑dimensionally) - horizontally and vertically - arranged depending upon a container width and height.

What is Position?

The CSS the position property controls the manner in which a given element box is placed in a document.

The position property can have the following values:

• static,

• relative,

• absolute,

• fixed, and

• sticky.

Non-statically positioned elements are sometimes referred to as positioned elements.

Static Position

In HTML by default all elements have the position property initial value of static.

The static positioning of an element means positioning pursuant to the normal flow of the document which means that the element takes space in the document in congruence with the outer and inner display rules and without any visual offset.

When an element is statically positioned the top, right, bottom, left and z-index properties have no effect on the element.

Relative Position

The relative positioning of an element means allocating a space for that element in the document in congruence with the outer and inner display rules but allowing a visual offset in relation to the allocated space using the top, right, bottom and left properties. The offset does not impact the allocated space and the flow for other element boxes.

Setting the position value to relative creates a new stacking context and thus enables stacking with z-index property for that element box.

Absolute Position

The absolute positioning of an element means not allocating a space for that element in congruence with the normal flow (i.e. with congruence with the outer and inner display rules) but placing that element in relation to its closest non-statically positioned ancestor (using the top, right, bottom and left properties) or in the absence of such an ancestor the initial containing block.

The collapsing of margins does not take place for absolutely positioned element boxes.

Setting the position value to absolute creates a new stacking context and thus enables stacking with z-index property for that element box.

The width and height properties for the absolutely positioned element boxes can be set in particular to auto, _px and _%.

Fixed Position

The fixed positioning of an element means not allocating a space for that element in congruence with the normal flow (i.e. with congruence with the outer and inner display rules) but placing that element in relation to the nearest ancestor with the transform, perspective or filter property value other than none or in the absence of such an element the viewport.

Setting the position value to fixed creates a new stacking context and thus enables stacking with z-index property for that element box.

Sticky Position

The sticky positioning of an element is a relative positioning of that element until a certain scrolling threshold is met when the positioning changes to fixed but only within the scrolling boundaries of its nearest block displayed ancestor.

Setting the position value to sticky creates a new stacking context and thus enables stacking with z-index property for that element box.

Z-Index

With the position property it is possible to specify a placement in a document horizontally and vertically i.e. x‑index (abscissa) and y‑index (ordinate). The z‑index (applicate) property allows for specifying for non‑statically positioned or flexed element boxes the stack order i.e. which one box should visually appear on top of another.

For a given element box the z-index property specifies the stack level through usage of both negative and positive integers. The higher the value the higher the stack level. An element box with a higher stack level appears visually over elements with lower stack level.

When an element has the z-index property set to other value than the default auto it establishes a new local stacking context for its ancestors. When comparing stack levels local stacking context levels of elements are taken into account before stacking levels of particular elements.

.class_a {
  position: relative;
  z-index: 2;
}

.class_b {
  position: relative;
  z-index: 1
}