CSS Box Model (Padding, Margin, Border)

In CSS, the term ‘Box Model’ is used when talking about design and layout. The CSS Box model is essentially a box that wraps around every Html element. It consists of – Margin, padding and borders and the actual content. When laying out a document, the browser`s rendering engine represents each element as a rectangular box according to the standard CSS Box Model. CSS determines the size position and properties of boxes.Every box is composed of four parts defined by their respective edges- the content edge, padding edge, border edge and margin edge.

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Padding –

The padding is bounded by the padding edge and extends the content area to include the element's padding, its dimensions are the padding-box width and padding-box height. The thickness of padding is determined by the padding-top, padding-right, padding-bottom, padding-left and shorthand padding properties.

Border –

The border area is bounded by the border edge, extends the padding area to include the element's borders. The thickness of the borders is determined by the border-width and shorthand border properties. If the box-sizing property is set to border-box, the border areas size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties, When there is a background-color of the background image set on a box, it extends to the outer edge of the border.

Margin-

The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin-box width and the margin-box height.

The size of the Margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties, When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.