CSS Box Model Explained

introduction

box model should be one of the most central concepts of CSS, this article mainly about CSS box model (box model).

 Before reading this piece, answer the following questions for yourself:

1. 
   What is a box model? What does a box model consist of? What does it do? At what point in the browser’s processing of the document does it appear? What are the next steps?
2.  What are the details of collapse margin?

 What is a box model?

CSS2.1 specification 8. box model The first sentence describes its definition very well:

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.

From this statement we can derive what box model is: box model is used to describe the rectangular boxes generated by the elements in the DOM tree, and UAs lay out these boxes according to visual formatting model .

 box dimension

This subsection is used to describe specific rectangular boxes, each of which will have 4 regions:

• content area
• padding area
• border area
• 
  margin area The size of each area is determined by its respective attributes. In addition padding , border , margin can be divided into top, bottom, left, right four smaller areas defined by specific attributes.

Let’s introduce the new term (for the sake of what follows), edge : The perimeter of each box is called edge , the boundary. Accordingly, we can know that each box will have four edge .

• 
  content edge or inner edge: the size of the content area is determined by the element’s width and height attributes, the element’s content, and its containing block.
• 
  padding edge: the padding edge defines the element’s padding box (which contains the content and padding area).
• 
  border edge: border edge defines the element’s border box (containing content, padding, and border area).
• 
  margin edge or outer edge: if margin’s width is 0, then margin area is the same as padding area.

Note: The background style of a box’s content area, padding area and border area is determined by the element’s background attribute. This means that background will by default extend all the way to the border area, and the margin will always be transparent. In CSS3, we can use the background new property to change the default.

CSS Box model 3
When a box fragments—is broken, as across lines or across pages, into separate box fragments—each of its boxes (content box, padding box, border box, margin box) also fragments. How the content/padding/border/margin areas react to fragmentation is specified in [css-break-3] and controlled by the box-decoration-break property.

This paragraph is about when a box is split into multiple box fragments across rows or pages, how should the box’s content, padding, border, and margin be represented in the different box fragments? These are defined in css-break-3 and can be controlled using box-decoration-break . In fact, CSS 2.1 describes this scenario, and 8.6 describes how the box model behaves when an inline box spans a line.

margin attributes: margin-top , margin-bottom , margin-left , margin-right and margin

These attributes are all familiar from the beginning. So here are just a few notes to emphasize: First, look at the definition of the attribute

'margin-top', 'margin-bottom', 'margin-left', 'margin-right'
Value:  	`<margin-width>` | inherit
Initial:  	0
Applies to:  	all elements except elements with table display types other than table-caption, table and inline-table
Inherited:  	no
Percentages:  	refer to width of containing block
Media:  	visual
Computed value:  	the percentage as specified or the absolute length

1. 
   value It can be <margin-width> and contains 3 specific values:
   • 
     <length> : Specify a fixed width, e.g. 3px , 1em , etc.
   • 
     <percentage> : The percentage value is calculated when converting from computed value to used value , with the base being width of generated box's containing block (which is the width of the element’s containing block). If the width of the containing block depends on the element, then the specific behavior is undefined in CSS 2.1.
   •  Auto, more on that later.
2. 
   margin-top and margin-bottom do not work for non-replaced inline elements .
3. 
   In CSS3, these properties are called physical margin properties. It also introduces the corresponding logical margin attributes, such as margin-block-start , margin-block-end (these attributes are related to writing mode in the document). (Logical margin and physical margin control the same margin area, just in a different way.) CSS3 added this feature because documents are arranged differently in different countries, for example, Arabic is written from right to left).

Note: The margin-trim property added in CSS3 is not covered here as it is not currently supported by any browsers (current as of February 2019).

collapsing margins

In CSS, the vertically oriented margins of two or more boxes are merged into a single margin, which is called collapse (collapsed), and the merged margin is called collapse margin . First, let’s highlight some of the exceptions where margins don’t merge:

1.  Horizontal margins do not collapse.
2. 
   There are two scenarios for adjacent verticals where the margin won’t collapse:
   • 
     The margin of the box of the root element does not collapse (in HTML it is the html element).
   • 
     If there are adjacent margins to the top margin and bottom margin of an element with a clearance (the gap created by the clear attribute that causes the element to move), the relevant margins of the element will be merged with the adjacent margins of its immediate sibling, but the merged margins will not be merged with the lower margin of the parent block.

So, how to determine the margin of two boxes are adjacent (adjoining)? Need to meet the following conditions at the same time:

• 
  Both boxes belong to the in-flow block-level boxes and are at the same block formatting model .
• 
  There are no line box , clearance , padding , border to space them out ( line box with a height of 0 is ignored here).
• 
  all belong to vertically adjacent box boundaries, i.e., they satisfy one of the following cases:
  • 
    The upper outer margin of the box and the upper outer margin of its first in-flow child node
  • 
    The lower outer margin of a box and the upper outer margin of its next immediate sibling node in in-flow .
  • 
    The lower outer margin of a box (and the height computed value of that box is auto) and the lower outer margin of its last in-flow child node.
  • 
    The upper and lower outer margins of a box that satisfies the conditions that the box does not create a new block formatting model , that min-height is 0, that the computed value of height is 0 or auto , and that there are no in-flow child nodes.

It should also be noted that a folded outer margin is also able to be adjacent to another outer margin, provided that any part of its outer margin is adjacent to the other outer margin.

Note: From the definition of collapse margin above we can draw the following inference:

• 
  Adjacent outer margins can be generated between elements that do not have a sibling or ancestor relationship
• 
  floated box and the margin of any other box will not be merged (including its in-stream children) – because float box is not in-stream.
• 
  The margin of an absolutely positioned box is not merged with the margin of any other box (including its in-stream child nodes) – again because the absolutely positioned box is out-of-stream.
• 
  The margin of the element that creates the new block formatting context will not be merged with the margins of its in-stream child nodes (e.g., floated box)
• 
  inline-block The box’s margin is not merged with the margins of other boxes (including its in-stream children) – a new block formatting model is created and is not block-level box .
• 
  in-flow block-level box will be merged with the upper outer margin of the neighboring in-flow block-level sibling node, unless that sibling node exists clearance
• 
  in-flow block element will be merged with the upper outer margin of its first in-stream child node (which is the block-level box), where it is required that the element does not have top border , does not have top padding , and the child node does not have clearance
• 
  A bottom margin whose height is auto and min-height is in-flow block-level box of 0 will merge with the bottom margin of its last  block-level child node, provided that the box does not have bottom padding , bottom border and the bottom margin of its child node does not merge with a top margin with clearance.
• 
  The outer margins of the box itself are also merged, provided that min-height is 0 , there are neither top and bottom nor top and bottom inner margins, the height is 0 or auto, and the line box is not included (and the outer margins of all in-stream children are merged)

 So how should the merged margin be valued?

• 
  When two or more margins are merged, the width of the collapsed margin is the largest of all the outer margins being merged.
• 
  If there is a negative margin, then subtract the absolute maximum value of the negative margin from the maximum value of the positive margin.
• 
  If there is no positive margin, subtract 0 from the largest absolute value of the neighboring margins

We’ll discuss this last special case below: if a box has adjacent top and bottom margins, it’s possible that the outer margin merge will penetrate the box. In this case, the position of the element depends on the relationship between the other elements of the merged margin:

• 
  If the element’s margins are merged with its parent’s top margin, then the box’s top border edge is the same as its parent’s top border edge
• 
  Otherwise, either the element’s parent is not involved in the margin collapse, or only the bottom margin of that parent is involved. Then the top border edge of that element is the same as if the bottom border of that element was non-zero.

Note that the position of elements crossed by collapsed outer margins does not affect the position of other elements whose outer margins are about to be merged, and the position of their upper border boundaries is used only for laying out the descendant elements of those elements.

padding attributes: padding-top , padding-right , padding-bottom , padding-left and padding

The padding attribute defines the width of the inner margin area of the box.

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Value:  	`<padding-width>` | inherit
Initial:  	0
Applies to:  	 
Inherited:  	no
Percentages:   
Media:  	visual
Computed value:  	 

The padding attribute and the margin attribute differ mainly by the following:

1.  The value of padding has no auto
2.  The padding value cannot be negative
3.  Different range of elements applied

As with margin, the base of the percentage is generated box's containing block of width (which is the width of the element’s containing block).

Note: The 4 attributes padding-top etc. are still physical attributes. Logical padding has been added in CSS3 – padding-block-start and so on.

 border attribute

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
Value:  	`<border-width>` | inherit
Initial:  	medium
Applies to:   
Inherited:  	no
Percentages:  	N/A
Media:  	visual
Computed value:  	 

 For border-width attention is needed:

1. 
   <border-width> The only two options are the keyword and <length> . The keyword is thin , medium , thick , and the size gets bigger in turn, depending on the user agent.
2.  Border width cannot be negative

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
Value:  	`<color>` | transparent | inherit
Initial:  	'color' 
Applies to:  	 
Inherited:  	no
Percentages:  	N/A
Media:  	visual
Computed value:  	 

It is important to note here that the initial value of border-color is the value of the color attribute, and we can sometimes use this feature to fulfill some special requirements.

Box model for inline-level elements in a bidirectional context

For each inline box, UAs must render margin, border, and padding in visual order (rather than in logical order) for each inline box generated by the element. There are two main cases:

• 
  direction: ltr : The leftmost box generated by the first line box in which the element appears has a left outer margin, a left border, and a left inner margin, and the rightmost box generated by the last line box in which the element appears has a right inner margin, a border, and a right outer margin.
• 
  direction: rtl : the box generated at the rightmost end of the first line box in which the element appears has a right inner margin, a border, and a right outer margin, and the box generated at the leftmost end of the last line box in which the element appears has a left outer margin, a left border, and a left inner margin