2Box Model & Layout Basics
The CSS Box Model
Every HTML element on a web page is a rectangular box. Understanding the CSS box model is essential because it controls spacing, sizing, and layout. Each box has four parts: content, padding, border, and margin.
/* Example of box model properties */
.box {
width: 200px; /* Content width */
padding: 20px; /* Space inside the border */
border: 5px solid teal;/* Border thickness and color */
margin: 10px; /* Space outside the border */
background-color: lightblue;
}By default, the width and height of an element only include the content area. To include padding and border in the total width, use `box-sizing: border-box`.
/* Content-box (default) */
div {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
}
/* Border-box includes padding and border in total width */
div {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}Visualizing the box model helps you understand spacing and alignment when designing layouts.
Display & Positioning
The `display` property defines how an element behaves in the layout.
div {
display: block; /* Default for <div>, takes full width */
}
span {
display: inline; /* Default for <span>, only as wide as content */
}
button {
display: inline-block; /* Behaves inline but accepts width & height */
}
p.hidden {
display: none; /* Hides the element completely */
}Positioning controls where elements appear on the page relative to normal flow or parent elements.
/* Position examples */
.static-box {
position: static; /* Default, flows normally */
}
.relative-box {
position: relative;
top: 10px;
left: 20px;
}
.absolute-box {
position: absolute;
top: 50px;
right: 30px;
}
.fixed-box {
position: fixed;
bottom: 10px;
left: 10px;
}
.sticky-box {
position: sticky;
top: 0; /* Sticks at top when scrolling */
}
/* z-index controls stacking order */
.box1 {
position: relative;
z-index: 1;
}
.box2 {
position: relative;
z-index: 2;
}Width, Height & Overflow
CSS allows you to control the width and height of elements, including minimum and maximum constraints. You can also handle content that overflows the box.
div {
width: 300px;
max-width: 100%;
min-width: 150px;
height: 200px;
max-height: 400px;
min-height: 100px;
overflow: auto; /* adds scrollbars if content exceeds box */
background-color: lightgreen;
}The `overflow` property has four values: `visible` (default), `hidden` (cuts off content), `scroll` (always shows scrollbars), and `auto` (shows scrollbars only when needed).
Mini Project Step
Create a layout with three boxes: a header, a content area, and a footer. Apply padding, borders, and margins to see the box model in action. Experiment with `display` (block, inline, inline-block) and `position` (relative, absolute, fixed, sticky). Finally, test different widths, heights, and overflow behaviors by adding extra content inside the boxes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Model Project</title>
<style>
body {
font-family: Arial, sans-serif;
}
.header, .footer {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 10px;
border: 5px solid darkgreen;
box-sizing: border-box;
}
.content {
background-color: lightyellow;
padding: 15px;
margin: 10px;
border: 3px solid orange;
width: 300px;
height: 150px;
overflow: auto;
}
.sticky-footer {
position: sticky;
bottom: 0;
}
</style>
</head>
<body>
<div class="header">Header Box</div>
<div class="content">
<p>This is the content area. Add enough text here to see the scrollbars appear if overflow is set to auto.</p>
<p>More content to test the box height and overflow.</p>
</div>
<div class="footer sticky-footer">Footer Box (Sticky)</div>
</body>
</html>