DEV Community

Cover image for Size of box in CSS (box-sizing)
Gajendra Dhir
Gajendra Dhir

Posted on

Size of box in CSS (box-sizing)

The layout of elements is done by marking the position and dimension of each element as rectangular boxes in the document, based on the CSS Box Model.

The size and space required for each rectangular box on the document is a very important consideration in any UI design project.

box-sizing: content-box

Consider the following CSS rule...

    .box {
        box-sizing: content-box;
        width: 150px;
        height: 100px;
        margin: 10px;
        padding: 5px;
        border: 2px solid red;
    }
Enter fullscreen mode Exit fullscreen mode

Size of the content-area for .box will be...

property value
width 150px
height 100px

and, the space required by it on the document will be...

property computation value
width 10 + 2 + 5 + 150 + 5 + 2 + 10 184px
height 10 + 2 + 5 + 100 + 5 + 2 + 10 134px

To compute of space for margins, one must take into consideration the impact of margin-collapse.

box-sizing: border-box

Now, check this rule...

    .box {
        box-sizing: border-box;
        width: 150px;
        height: 100px;
        margin: 10px;
        padding: 5px;
        border: 2px solid red;
    }
Enter fullscreen mode Exit fullscreen mode

In this case, the size of the content-area for .box will be...

property computation value
width 150 - 5 - 2 - 5 - 2 136px
height 100 - 5 - 2 - 5 - 2 86px

and, the space required by the element on the document will be...

property computation value
width 10 + 150 + 10 170px
height 10 + 100 + 10 120px

How does this work?

An understanding of the Box Model goes a long way in achieving the desired UI/UX.

Areas and Boxes

The rectangular box for every element has 4 areas or parts...

Box Model in CSS

content-area

This is the area where the actual content - text, images or other HTML elements - are displayed.

padding-area

specified using padding or the padding-* sub-properties.

This is the area that surrounds the content-area and extends to the outer edge of the padding on each side.

border-area

specified using border or the border-* sub-properties.

This is the area surrounding the padding-area and extending up to the outer edge of the border on each side.

margin-area

specified as margin or using the margin-* sub-properties.

The area surrounding the border-area and extending up to the edge of the margin specified on each side.

The Box

Based on these areas and their different combinations, the browser uses different boxes when it computes the layout for a each element in the document...

  • content-box - it is the innermost box (or the content-area) of the element that renders the actual content - text, images and other elements.

  • padding-box - from the outer edge of the content box and up to the outer edge of the padding-area. If padding width and height is 0, then padding-box will be same as content-box.

  • border-box - starts from the outer area of the padding-box up to the outer edge of the border-area.

  • margin-box - the area of the element beyond the border-box and up to the outer edge of the margin-area.

  • visual-box - the box that is seen on the web page, this includes the content, padding and border. The margin is not a part of this.

  • layout-box - the space occupied by the element on the document - including its content, padding, border and margin. This space is used for layout and position on the document.

  • paint-box - this is the paintable area of the element. This area is the excludes the margin-area.

  • coord-box - this is the location and size of the element within its parent. These coordinates exclude the margin area (of the parent).

Sub-Properties

Using sub-properties, different values can be set for the top, left, bottom and right sides of padding, border and margin.

  • padding

    • padding-left
    • padding-right
    • padding-top
    • padding-bottom
    • padding-block
    • padding-block-start
    • padding-block-end
    • padding-inline
    • padding-inline-start
    • padding-inline-end
  • border

    • border-left-width
    • border-right-width
    • border-top-width
    • border-bottom-width
    • border-block-width
    • border-block-start-width
    • border-block-end-width
    • border-inline-width
    • border-inline-start-width
    • border-inline-end-width

border property has sub-properties for setting styles and color of each side.

  • margin
    • margin-left
    • margin-right
    • margin-top
    • margin-bottom
    • margin-block
    • margin-block-start
    • margin-block-end
    • margin-inline
    • margin-inline-start
    • margin-inline-end

box-sizing

CSS allows for two box-sizing options.

content-box

    .box {
        box-sizing: content-box;
        ...
    }
Enter fullscreen mode Exit fullscreen mode

when box-sizing is content-box

In a content-box, the width, min-width, max-width, height, min-height, max-height properties denote the dimension of the content-area. The padding, border etc add on to this to compute the <layout-box>.

border-box

    .box {
        box-sizing: border-box;
        ...
    }
Enter fullscreen mode Exit fullscreen mode

when box-sizing is border-box

In a border-box, the width, min-width, max-width, height, min-height, max-height properties set the dimensions of the <paint-box>, i.e. the content, padding and border areas are include within the width and height.

Top comments (0)