The three properties in CSS like padding, border, and margin are part of the basic concept of the CSS Box Model, which is how CSS treats elements as boxes consisting of content, padding, border, and margin. These properties are crucial for controlling layout and spacing between elements. In this article, we will explore the differences, functions, and proper usage of padding, border, and margin in CSS.

What is the Box Model in CSS?

Before we move on to the next topic, it would be better to understand the Box Model in CSS. Every element in HTML is considered a box consisting of:

Content containing text or images.
Padding: the space between the content and the border.
Border: the line surrounding the element.
Margin: the space between the element and other elements.

Padding: Space Inside Elements

Padding is the space between the content of an element and its border. Padding creates space inside an element without affecting the position of other elements. So, padding only adjusts the space inside an element, without disturbing the elements next to it. Here's an example of how to use padding:

<!DOCTYPE>
<html>
	<head>
		<title>Learn Box Model CSS - NganggurDev</title>
		<style>
			.box1 {
			  padding: 20px;
			}
		</style>
	</head>
	<body>
	 <div class="box1">
		 <p>Box 1</p>
		</div>
		<div class="box2">
		 <p>Box 2</p>
		</div>
	</body>
</html>

In the code above,.box1 will add a 20-pixel space around the content of the element from the class .box1 without affecting the position of the element .box2. We can apply padding to specific sides using the properties below.

padding-top to set the top margin within an element.
padding-right to set the right margin within an element.
padding-bottom to set the bottom margin within an element.
padding-left to set the left margin within an element.

Border on Elements

Border is a line that surrounds the content of an element. Here is an example of its use.

<!DOCTYPE>
<html>
	<head>
		<title>Learn Box Model CSS - NganggurDev</title>
		<style>
			.box1 {
			  border: 2px;
			}
		</style>
	</head>
	<body>
	 <div class="box1">
		 <p>Box 1</p>
		</div>
	</body>
</html>

In the code example above, the element .box1 will display a line on each side of the element. We can also set the color, thickness, and style of the line. Adjust the previous CSS code as shown below.

.box1 {
 border: 2px solid #333;
}

The explanation of the code above is as follows.

border is a property for displaying lines on the sides of an element.
2px is the thickness of the line.
solid is the style of the line. We can also use other border styles such as dashed, dotted, or double.
#333 is the color of the line.

Margin: Distance Between Elements

The opposite of Padding, Margin serves to provide distance between elements so that they are not too close to each other. Here is an example.

<!DOCTYPE>
<html>
	<head>
		<title>Learn Box Model CSS - NganggurDev</title>
		<style>
			.box1 {
			  margin: 10px;
			}
		</style>
	</head>
	<body>
	 <div class="box1">
		 <p>Box 1</p>
		</div>
		<div class="box2">
		 <p>Box 2</p>
		</div>
	</body>
</html>

In the code above, the element .box1 will give a distance of 10 pixels to the element box2. We can also give margins on certain sides with the properties below.

margin-top sets the top outer margin of the element.
margin-right sets the right outer margin of the element.
margin-bottom sets the bottom outer margin of the element.
margin-left sets the left outer margin of the element.

Tips for Centering Elements Using Margins.

We can center elements horizontally using the following method.

.box1 {
 margin: auto;
}

The method above is commonly used to center elements, but it is not as efficient as using CSS Flexbox.

Conclusion

By understanding and using padding, border, and margin appropriately, we can create a more professional, easy-to-read, and visually comfortable layout for web pages.

Thank you, see you in the next article.