Assignments Of Class 10: Margin and Padding
Assignment 1: Basic Margin Application
Objective: Apply margin to all sides of a box.
Instructions:
1. Create an HTML file with a <div> element.
2. Apply a margin of 20px to the element.
3. Observe the effect of the margin.
Solution:
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>Basic Margin Example</title>
<style>
div {
background-color: lightblue;
margin: 20px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Explanation:
In this example, we applied margin: 20px; to the <div>. This will create a space of 20px on all four sides of the element, separating it from other content.
Assignment 2: Margin for Each Side
Objective: Apply different margin values to each side of an element.
Instructions:
1. Create a <div> element.
2. Apply specific margins to the top, right, bottom, and left sides (e.g., top: 30px, right: 40px, bottom: 50px, left: 60px).
Solution:
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 for Each Side</title>
<style>
div {
background-color: lightgreen;
margin-top: 30px;
margin-right: 40px;
margin-bottom: 50px;
margin-left: 60px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Explanation:
Here, each side of the <div> has a different margin applied. This allows you to control the space between the element and its surrounding elements on a per-side basis.
Assignment 3: Padding Application
Objective: Apply padding to an element.
Instructions:
1. Create an HTML file with a <div> element.
2. Apply a padding of 20px to the element.
3. Observe the effect of the padding.
Solution:
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>Padding Example</title>
<style>
div {
background-color: lightcoral;
padding: 20px;
height: 100px;
}
</style>
</head>
<body>
<div>Content with padding</div>
</body>
</html>
Explanation:
The padding property creates space inside the <div> between its content and its border. A padding of 20px is added on all sides, making the content within the box more spacious.
Assignment 4: Padding for Each Side
Objective: Apply different padding values to each side of an element.
Instructions:
1. Create a <div> element.
2. Apply specific padding to the top, right, bottom, and left sides (e.g., top: 10px, right: 20px, bottom: 30px, left: 40px).
Solution:
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>Padding for Each Side</title>
<style>
div {
background-color: lightgoldenrodyellow;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
height: 100px;
}
</style>
</head>
<body>
<div>Content with varying padding</div>
</body>
</html>
Explanation:
In this case, padding is applied to each side with different values, creating varied amounts of space inside the <div>.
Assignment 5: Horizontal Centering with margin: auto
Objective: Center a block-level element horizontally using margin: auto.
Instructions:
1. Create an HTML file with a <div> element.
2. Set a width for the <div> and apply margin: auto to center it horizontally.
Solution:
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>Centering with Margin Auto</title>
<style>
div {
background-color: lightpink;
width: 50%;
margin: auto;
height: 100px;
}
</style>
</head>
<body>
<div>Centered div</div>
</body>
</html>
Explanation:
Setting the margin to auto on a block-level element (with a defined width) centers it horizontally within its container. The element takes up 50% of the page width and is centered using automatic margins on both sides.
Assignment 6: Margin and Padding on Nested Elements
Objective: Apply margin and padding to nested elements and observe the effect.
Instructions:
1. Create a parent <div> and a child <div> element.
2. Apply different margins and paddings to both the parent and child elements.
Solution:
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>Nested Margin and Padding</title>
<style>
.parent {
background-color: lightgray;
margin: 20px;
padding: 30px;
width: 300px;
}
.child {
background-color: lightseagreen;
margin: 10px;
padding: 15px;
}
</style>
</head>
<body>
<div class="parent">
Parent Div
<div class="child">Child Div</div>
</div>
</body>
</html>
Explanation:
Here, the parent and child <div> elements have different margins and paddings applied. The parent <div> has both margin and padding, creating space outside and inside the box. The child <div> has its own margin and padding, which are relative to the parent.
Assignment 7: Reducing Padding Inside a Box
Objective: Adjust the padding inside an element to make the content appear closer to the borders.
Instructions:
1. Create a <div> with padding of 50px.
2. Reduce the padding to 10px and observe how the content moves closer to the border.
Solution:
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>Reducing Padding</title>
<style>
div {
background-color: lightsteelblue;
padding: 50px;
height: 100px;
}
</style>
</head>
<body>
<div>Content with large padding</div>
<div style="padding: 10px;">Content with reduced padding</div>
</body>
</html>
Explanation:
In the second <div>, the padding is reduced to 10px, making the content appear closer to the border compared to the first <div>.
Assignment 8: Margin Collapse
Objective: Understand the concept of margin collapse in adjacent block-level elements.
Instructions:
1. Create two adjacent block-level elements.
2. Apply margins to both elements and observe how the margins collapse.
Solution:
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 Collapse</title>
<style>
div {
margin: 30px;
height: 100px;
background-color: lightcyan;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
Explanation:
When two adjacent block-level elements have margins, the larger margin will be applied, and the smaller margin will collapse. In this case, both <div> elements have a margin of 30px, so the final gap between them is still 30px, not 60px.
Assignment 9: Negative Margins
Objective: Use negative margins to pull an element outside its container.
Instructions:
1. Create a container <div> and a child element inside it.
2. Apply a negative margin to the child element and observe the result.
Solution:
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>Negative Margin</title>
<style>
.container {
background-color: lightyellow;
padding: 20px;
width: 300px;
height: 100px;
}
.child {
background-color: lightpink;
margin-top: -20px;
}
</style>
</head>
<body>
<div class="container">
<div class="child">Child with Negative Margin</div>
</div>
</body>
</html>
Explanation:
By using a negative margin, the child <div> is pulled upwards by 20px, making it overlap with the parent container.
Assignment 10: Combining Margin and Padding for Layout
Objective: Use both margin and padding to create a spaced-out layout.
Instructions:
1. Create a parent container with a child element inside.
2. Apply padding and margin to the parent and child elements for layout control.
Solution:
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>Combining Margin and Padding</title>
<style>
.parent {
background-color: lightgray;
margin: 40px;
padding: 20px;
width: 400px;
}
.child {
background-color: lightgreen;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent">
Parent Div
<div class="child">Child Div</div>
</div>
</body>
</html>
Explanation:
Here, both margin and padding are used to create spacing around the elements. The parent <div> has a margin of 40px and padding of 20px, while the child <div> has a top margin and padding applied, controlling the layout's inner and outer spacing.
These assignments help reinforce the concepts of margin and padding, offering a practical approach to styling with CSS.
No comments:
Post a Comment