Lab Sheet 5: Understanding the CSS Box Model and Positioning
🧩 Part A: Exploring the CSS Box Model
Exercise 1 – Basic Box Model Visualisation
Objective: Understand how padding, border, and margin affect an element’s total size.
Steps:
Create a new HTML file named
boxmodel.html.Add the following code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightseagreen;
width: 200px;
padding: 35px;
border: 20px dashed indianred;
margin: 25px;
}
</style>
</head>
<body>
<h2>Box Model Example</h2>
<div>Content box</div>
</body>
</html>
Open the file in a browser and observe:
How much space the box takes.
The color and space around content.
Task:
Change the padding and margin values. Observe how the total box size changes.
Exercise 2 – Calculate the Total Width
Objective: Learn how CSS adds up dimensions.
Code to modify:
div {
width: 300px;
padding: 20px;
border: 5px solid gray;
margin: 10px;
}
Question:
What is the total width of the element in pixels?
(Hint: Total Width = width + padding + border + margin)
📍 Part B: Understanding CSS Positioning
Exercise 3 – Static Position
Objective: Learn the default position of elements.
<div class="static">This div element has position: static;</div>
.static {
position: static;
border: 8px solid #08a9bf;
}
Observe how it stays in the normal page flow.
Exercise 4 – Relative Position
Objective: Shift elements relative to their normal position.
<div class="relative">This div element has position: relative;</div>
.relative {
position: relative;
top: 30px;
right: 50px;
border: 5px solid #eb14ca;
}
Experiment by changing top, right, left, and bottom.
Exercise 5 – Fixed Position
Objective: Keep an element fixed even when scrolling.
<div class="fixed">This div element has position: fixed;</div>
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
Scroll the page and observe how the element behaves.
Exercise 6 – Absolute Position
Objective: Position elements relative to their nearest positioned ancestor.
<div class="relative">
This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
.relative {
position: relative;
width: 500px;
height: 200px;
border: 3px solid #0a27b3;
}
.absolute {
position: absolute;
top: 80px;
right: 0;
width: 250px;
height: 100px;
border: 3px dotted #f83e90;
}
Exercise 7 – Sticky Position
Objective: Make elements “stick” to the top when scrolling.
<div class="sticky">I am a sticky element!</div>
<div style="padding-bottom:2000px">
<p>Scroll to see sticky effect.</p>
</div>
.sticky {
position: sticky;
top: 0;
padding: 5px;
background-color: #4bdbc7;
border: 4px double #f10d7f;
}
🧠 Challenge Task (Optional)
Create a simple webpage that uses all types of CSS positioning to build a layout like this:
A header (sticky)
A sidebar (fixed)
A main content area (relative)
A floating note box (absolute)
Save it as layout_challenge.html
