Box model in CSS

If you understand box model, it will be very easy for you to write css code.

Box Model

As you can see in above image, box in azure color has a width of 100px (content area). Then padding of 10px is applied from each side followed by green border. So total width of box = 100px + 2* (padding width + border width) = 122px

box-sizing property

In above example, we have seen that width of element was set at 100 px but actual width rendered by browser was 122px (due to extra border and padding). To fix this behaviour, we can use box-sizing property with value set to 'border-box'.As you can see in above box(with boxSizing:'border-box'), width rendered by the browser is 100px. This includes border as well as padding. So in short, browser allocates the space for border and padding (from 100px) and remaining space is given to content area. So content width is 78px. Because 22px was allocated to border and padding.

• Element actual width = Element width + padding-left + padding-right + border-left + border-right
• box-sizing property : content-box|border-box|initial|inherit
• By default, element width/height changes if we manipulate border or padding
• When border-box is used, element width/height does not change if we manipulate border or padding