Web Development
Box-Model

Box-Model

Jeevan Henry Dsouza's photo
Jeevan Henry Dsouza
·

2 min read

Table of contents

Content-box

  1. When using box-sizing: content-box, which is the default value, the specified width and height of an element only include the content area, excluding padding, border, and margin.

  2. Here's an example to illustrate the behavior of box-sizing: content-box:

 div {
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
}
  1. In this example, the specified width of 200px and height of 100px only apply to the content area. The padding and border are added to the dimensions of the element.

4. The total width calculation would be as follows:

  • Specified width: 200px

  • Padding (left + right): 10px + 10px = 20px

  • Border (left + right): 2px + 2px = 4px

  1. Total width calculation: 200px (specified width) + 20px (padding) + 4px (border) = 224px

  2. Therefore, with box-sizing: content-box, the actual width of the element, including padding and border, would be 224px.

  3. It's worth noting that box-sizing: content-box is the default behavior, so if you don't explicitly set the box-sizing property, elements will follow this behavior by default.

Border-Box

  1. It tells the browser that the values specified for an element’s width and height will include content, padding, and borders.

  2. This typically makes it much easier to size elements.

  3. The box-sizing: border-box is the default styling that browsers use for the <table>, <select>, and <button> elements.

  4. For example – If you set an element’s width to 200 and height to 100 pixels, that 200 and 100 pixels will include any border or padding that you have added and the content box will shrink to absorb that extra width and height.

  5.   box-sizing: border-box;

    Dimensions of the element are calculated as:

     width = border + padding + width of the content  
 height = border + padding + height of the content
box-model