CSS Box Sizing

CSS Tutorial

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

« Previous Next »

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>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<div class="div1">CSS - 1</div>
<br>
<div class="div2">CSS - 2</div>
</body>
</html>

Both box are the same size.

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

Result

« Previous Next »

C++ Tutorial	CSS Tutorial	C# Tutorial	PHP Tutorial
Java Tutorial	SQL Tutorial	JQuery Tutorial	MySQL Tutorial
HTML - Tutorial	Node.Js Tutorial	JavaScript Tutorial	Python Tutorial
MySQL Installation	Node.js Installation	XAMPP -- Installation	Python Installation
C++ - Environment Setup	Java - Environment Setup	C# - Environment Setup	Responsive Web Design

CSS - Box Sizing

Example : Box Sizing

Result