The CSS box model is a fundamental concept that describes how elements are structured and laid out in a web page. It defines the dimensions and spacing of an element, including its content, padding, borders, and margins. Understanding the box model is essential for controlling the layout and appearance of elements on a webpage.
The CSS box model consists of the following components:
• Content: This is the innermost part of an element and contains the actual content, such as text, images, or other elements.
• Padding: Padding is the space between the content and the element's border. It adds space inside the element without affecting the border or margins.
• Border: The border surrounds the padding and content and defines the boundary of the element. It can have a specific width, style, and color.
• Margin: Margin is the space outside the element's border. It provides separation between elements and affects their positioning in relation to each other.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS Box Model</title>
</head>
<body>
<div class="box">
<h2>Welcome to JTC</h2>
<p>This is the content</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h2, p{
font-family: Arial, Helvetica, sans-serif;
color: black;
}
.box{
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
