HTML elements are universally treated as boxes in CSS, forming the core layout and design founadtion known as the CSS box model. Each box encapsulates an element and consists of four key components: margin, border, padding, and the actual content. This model enables precise control over an element’s spacing relative to surrounding elements and borders.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Demo 1</title>
<style>
.demo-box {
width: 120px;
height: 120px;
background-color: #7cfc00;
margin-left: 120px;
border: 5px solid #ff4500;
}
</style>
</head>
<body>
<div class="demo-box">Demo Content</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Demo 2</title>
<style>
* {
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 460px;
height: 470px;
background-color: #87ceeb;
margin: 120px 0 0 120px;
padding: 55px 0 0 65px;
}
.inner-card {
width: 180px;
height: 160px;
background-color: #ffb6c1;
padding: 55px 0 0 35px;
}
</style>
</head>
<body>
<div class="container">
<div class="inner-card">Inner Card Content</div>
</div>
</body>
</html>