CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

CSS - Box Sizing

With CSS you can create many kind of box size effects that may help you to design your website.

The CSS box-sizing property allows us to include the padding and border in an element's total width and height.

If you set box-sizing: border-box; on an element, padding and border are included in the width and height

The box property has worked like as shown below

width + padding + border = actual width of an element
height + padding + border = actual height of an element

Example : Box Sizing

<!DOCTYPE html>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
<div class="div1">CSS - 1</div>
<div class="div2">CSS - 2</div>

Both box are the same size.

When the above code is compiled , it produces the following result.


css box