Lecture Notes Of Class 10: Margin and Padding
Objective:
- To
understand and apply margins and padding in web design.
Topics:
1. Margin:
o
The margin is the space outside the element's
border.
o
It creates space between the element and
surrounding elements.
Syntax:
css
Copy code
margin:
value;
o
Values: You can specify margins using
different units like pixels (px), em, rem, or percentage (%).
o
You can also specify different margins for each
side (top, right, bottom, left) using:
css
Copy code
margin-top:
value;
margin-right:
value;
margin-bottom:
value;
margin-left:
value;
2. Padding:
o
Padding is the space between the content of the
element and its border.
o
It helps in creating space inside the element.
Syntax:
css
Copy code
padding:
value;
o
Values: Similar to margins, padding can
also be specified using different units like px, em, rem, or %. Padding is
applied to all four sides of the element.
You can also specify padding for
each side:
css
Copy code
padding-top:
value;
padding-right:
value;
padding-bottom:
value;
padding-left:
value;
3. margin-auto:
o
The margin: auto; property is commonly used for
centering an element horizontally within its container (in case of block-level
elements).
o
It works when the element has a defined width.
Example:
css
Copy code
.container
{
width: 50%;
margin: auto;
}
Lab
Exercise:
Objective: Create a
layout using various margins and paddings to understand how they affect the
design.
1. Instructions:
o
Create a simple layout with at least three boxes: a
header, a content area, and a footer.
o
Apply margins and paddings to each box with
different values and observe the changes in layout.
o
Use margin: auto; to center the content box.
2. HTML Code
Example:
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>Margin and Padding Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">Header</div>
<div class="content">Content
Area</div>
<div class="footer">Footer</div>
</body>
</html>
3. CSS Code
Example (styles.css):
css
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: lightblue;
padding: 20px;
margin: 10px;
text-align: center;
}
.content
{
background-color: lightgreen;
padding: 30px;
margin: 20px auto;
width: 80%; /* To apply margin: auto; */
text-align: center;
}
.footer {
background-color: lightcoral;
padding: 10px;
margin: 15px;
text-align: center;
}
4. Task:
o
Observe how different margin and padding values
affect the position and size of the elements.
o
Change the values of padding and margin to see how
it impacts the layout.
o
Experiment with margin: auto; in the .content class
to center it horizontally.
Key
Takeaways:
- Margin
affects the space outside an element, creating gaps between the element
and its surroundings.
- Padding
affects the space inside an element, between the content and the element's
border.
- margin:
auto; can be used to center block-level elements
horizontally within their container.
No comments:
Post a Comment