Lecture Notes Of Class 3: CSS Box Model
Objective:
- Understand
the concept of the CSS Box Model.
- Learn
how the margin, border, padding, and content of an element affect its
layout.
Topics to
Cover:
1. Introduction
to the CSS Box Model: The CSS Box Model is a fundamental concept that
defines how elements are displayed on a webpage. Every HTML element can be
considered as a rectangular box, and its space on the webpage is determined by
four main areas:
o
Content: The actual content of the box
(e.g., text, images, etc.).
o
Padding: The space between the content
and the border. Padding is inside the box, meaning it increases the size of the
element but doesn't affect the position of other elements.
o
Border: A border surrounding the
padding (if any) and content. Borders are typically styled with color, width,
and style.
o
Margin: The outermost space around the
element. Margin separates the element from other elements on the page.
2. Diagram
of the Box Model: Here’s a simple visual breakdown:
lua
Copy code
+-----------------------------+
| Margin |
| +-----------------------+ |
| |
Border | |
| | +-----------------+ | |
| |
| Padding |
| |
| |
| +-----------+ |
| |
| |
| | Content |
| | |
| |
| +-----------+ |
| |
| | +-----------------+ | |
| +-----------------------+ |
+-----------------------------+
Understanding
Each Part of the Box Model:
1. Content:
o
The area where text or images are displayed.
o
Size is determined by the width and height
properties.
o
Example:
css
Copy code
.content
{
width: 200px;
height: 100px;
}
2. Padding:
o
Adds space inside the element, between the content
and the border.
o
It does not affect the layout outside of the
element.
o
Example:
css
Copy code
.content
{
padding: 10px; /* Adds 10px space around
the content */
}
3. Border:
o
Surrounds the padding and content.
o
You can set the border style (solid, dashed,
dotted), width, and color.
o
Example:
css
Copy code
.content
{
border: 2px solid black; /* 2px thick,
solid black border */
}
4. Margin:
o
The space outside the element that separates it
from other elements.
o
Example:
css
Copy code
.content
{
margin: 20px; /* Adds 20px space outside
the element */
}
Lab
Exercise:
Objective: Create
multiple boxes using <div> elements and apply CSS box model properties to
visualize their effects.
Steps:
1. Create an
HTML File (index.html):
o
Add a basic structure with several <div>
elements to represent different boxes.
o
Assign different background colors to each box for
better visibility.
2. Apply CSS (styles.css):
o
Style the boxes using margin, padding, border, and
content properties to see their effects.
Example
Code:
HTML:
html
Copy code
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Box Model</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</body>
</html>
CSS:
css
Copy code
/* Reset
margin and padding for all elements */
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: space-around;
margin: 20px;
}
.box {
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
color: white;
font-size: 16px;
}
/* Box 1
with padding, border, and margin */
.box1 {
background-color: #3498db;
padding: 20px;
border: 5px solid #2980b9;
margin: 10px;
}
/* Box 2
with no padding, border, but margin */
.box2 {
background-color: #e74c3c;
margin: 20px;
}
/* Box 3
with all properties */
.box3 {
background-color: #2ecc71;
padding: 15px;
border: 3px solid #27ae60;
margin: 30px;
}
Explanation:
- Box
1 will have padding, a border, and margin. You
can see how the total width and height of the box increase with the
padding and border.
- Box
2 will have no padding or border but will only
use margin to create space between it and the surrounding elements.
- Box 3
will demonstrate the effects of all box model properties working together.
Expected
Outcome:
- Students
will be able to identify how padding, border, and margin affect the
overall size and positioning of the boxes.
- The layout
will show how elements can have internal and external spacing, and how
borders can affect the design.
Additional
Challenge (Optional for advanced students):
- Experiment
with using different box-sizing properties like border-box and content-box
to see how the box model is altered.
css
Copy code
/* With
border-box, the padding and border are included in the width and height */
.box {
box-sizing: border-box;
}
No comments:
Post a Comment