Categories
CSS Tutorials

The box model

introduction
Formatting Text
Box Model
Advanced selectors
More about CSS

The CSS box model has multiple properties. It is a combination of content, padding, border, margin properties. By using this box model we can create any layout and design for a web page. It is used as a toolkit to customize the HTML elements. Basically web browsers take every HTML element as a rectangular box. According to the box model, its properties are:

  • content: This property is used to displays the text, images, etc, that can be sized using the width & height property.
  • padding: This property is used to create space around the element, inside any defined border.
  • border: This property is used to cover the content & any padding, & also allows to set the style, color, and width of the border.
  • margin: This property is used to create empty space around the element outside the border ie., around the border area.

Usually when you set the width and height of an element using the CSS width and height properties, in reality you are only setting the width and height of the content area of that element. The actual width and height of the element’s box depends on several factors.

Total width = width + padding-left + padding-right + border-left + border-right + margin-left  + margin-right

Total height = height + padding-top + padding-bottom + border-top + border-bottom +  margin-top + margin-bottom

The following example will explain the box model:

<html>
	<head>
		<style>
			.main {
				font-size: 32px;
				font-weight: bold;
				text-align: center;
			}
			  
			#box {
				padding-top: 30px;
				width: 300px;
				height: 80px;
				border: 30px solid green;
				margin: 50px;
				text-align: center;
				font-size: 28px;
				font-weight: bold;
			}
		</style>
	</head>	  
	<body>
		<div class="main">CSS Box-Model Property</div>
		<div id="box">Edupoly Tutorials</div>
	</body>
</html>

Output: