CSS Box Model Tutorial

In this CSS Tutorial we are going to learn about CSS Box Model Tutorial, CSS Box Model is fundamental concept in web design and layout that plays a crucial role in creating visually appealing and responsive web pages. in this css tutorial we want to talk about CSS Box Model and how it works.

What is the CSS Box Model ?

CSS Box Model is a concept that describes the structure of an HTML element. every HTML element can be thought of as rectangular box that surrounds its content. Box Model comprises four elements: content area, padding, border and margin.

Content Area: content area is the space inside an HTML element where the text, images and other content are displayed. it is primary component of the box model.

Padding: Padding is the space between content area and the border of an element. it can be used to create spacing between the content and the border or between the border and the margin.

Border: border is a line that surrounds the padding and content area of an element. it can be styled using different CSS properties, such as color, width and style.

Margin: Margin is the space between the border of an element and the adjacent elements. it can be used to create spacing between elements such as paragraphs, images and divs.

CSS Box Model Properties

CSS provides different properties that can be used to manipulate Box Model elements. these are some commonly used properties:

width and height: These properties set the width and height of an element content area.
padding: This property sets padding of an element.
border: This property sets the border of an element.

margin: This property sets margin of an element.
box-sizing: This property controls how the size of an element is calculated. default value is content-box which means that the width and height of an element are only calculated based on its content area. but you can also set it to border-box which includes padding and border in the calculation.

This is an example that how we can use the properties

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
  box-sizing: border-box;
}

.box {

width: 200px;

height: 200px;

padding: 20px;

border: 2px solid black;

margin: 10px;

box-sizing: border-box;

}

In this example we have set the width and height of the content area to 200 pixels, added a 20 pixel padding, 2 pixel black border and 10 pixel margin. we have also set box sizing property to border box which means that the width and height include the padding and border.

This is practical example with HTML

<!DOCTYPE html>
<html>
<head>
	<title>CSS Box Model Example</title>
	<style>
		.box {
			width: 200px;
			height: 200px;
			padding: 20px;
			border: 2px solid black;
			margin: 10px;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div class="box">
		<h2>GeeksCoders</h2>
		<p>This is an example of the CSS Box Model in action.</p>
	</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>CSS Box Model Example</title>
	<style>
		.box {
			width: 200px;
			height: 200px;
			padding: 20px;
			border: 2px solid black;
			margin: 10px;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div class="box">
		<h2>Welcome to geekscoders.com</h2>
		<p>This is an example of the CSS Box Model in action.</p>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Box Model Example</title>

<style>

.box {

width: 200px;

height: 200px;

padding: 20px;

border: 2px solid black;

margin: 10px;

box-sizing: border-box;

}

</style>

</head>

<body>

<h2>GeeksCoders</h2>

<p>This is an example of the CSS Box Model in action.</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Box Model Example</title>

<style>

.box {

width: 200px;

height: 200px;

padding: 20px;

border: 2px solid black;

margin: 10px;

box-sizing: border-box;

}

</style>

</head>

<body>

<h2>Welcome to geekscoders.com</h2>

<p>This is an example of the CSS Box Model in action.</p>

</div>

</body>

</html>

In above example we have created div element with the class box. after that we have applied CSS Box Model properties to the box class. we have set the width and height of the content area to 200 pixels, added 20 pixel padding, 2 pixel black border and 10 pixel margin. we have also set the box-sizing property to border-box.

Inside the div element we have added heading and paragraph to show how the content area is affected by the Box Model properties.

When you view this example in web browser, you will see box with 200 pixel width and height. content is centered within the content area which has 20 pixel padding. border is 2 pixels wide and is set to solid black. margin is 10 pixels on all sides.

This will be the result

Learn More on CSS

CSS Border Tutorial

What is the CSS Box Model ?

CSS Box Model Properties

Learn More on CSS

Leave a Comment Cancel reply