Practice Problems

Create a new HTML file for each problem, using internal or external CSS for styling.

File Name: problem1.html
Create two <div> boxes side by side using display: inline-block;.
Give them different border, padding, and margin values so you can observe differences.
Add text inside and adjust the width to see how content moves when padding or border changes.

File Name: problem2.html
Use one box with box-sizing: content-box; (default) and another with box-sizing: border-box;.
Set both boxes to the same width (e.g., 200px) and same border/padding.
Note how they render differently because of the box sizing approach.

File Name: problem3.html
Create two stacked <div> elements (one above the other).
Give each a top or bottom margin, then experiment with removing or changing them to observe margin collapse behavior.
Write a short note about how the actual space differs from the sum of their defined margins.

After completing these exercises, call Mike over for feedback on your newly created HTML and CSS solutions.

File Name: problem4.html

Instructions:

HTML Structure:
- Create a standard HTML document.
- In the <body>, create two <div> elements with a class of "card".
- Add a heading (e.g., <h2>) and a short paragraph inside each card to simulate content.
CSS Styling Requirements:
- Card Layout:
  - Set a fixed width (e.g., 250px) for each card.
  - Apply different padding and border values to each card.
  - Use display: inline-block; so the cards are positioned side-by-side.
- Overlapping Effect:
  - For one card, apply a negative left or right margin (e.g., margin-left: -30px;) to create an overlapping visual effect.
- Box-Sizing:
  - Apply box-sizing: border-box; globally (using the universal selector) to ensure that padding and borders are included in the defined width.
- Observation:
  - Notice how the negative margin causes the cards to overlap, and observe how padding and borders affect the overall size.
Objective:
Explore how margins (including negative values), padding, and borders interact within the box model to create overlapping card components.

File Name: problem5.html

Instructions:

HTML Structure:
- Create a standard HTML document.
- In the <body>, add a container <div> with a class of "gallery".
- Inside the container, create six or more <div> elements with a class of "box". Each box can represent an image placeholder or content card.
CSS Styling Requirements:
- Gallery Layout:
  - Use display: inline-block; (or flexbox if desired) on the boxes so they align in a row and wrap onto the next line on smaller screens.
  - Set each box to a fixed width (e.g., 150px) and height (e.g., 150px).
- Box Model Properties:
  - Apply padding, a border (e.g., 2px solid #333), and a margin (e.g., 10px) to each box.
  - Ensure you include box-sizing: border-box; so the total dimensions include padding and borders.
- Responsive Behavior:
  - Optionally, add a media query that adjusts the box size or margin on smaller viewports so that the gallery remains visually balanced.
Objective:
Create a responsive gallery that demonstrates how consistent box-sizing and spacing (margin, padding, border) work together in a multi-box layout, and how changes affect the overall grid.

File Name: problem6.html

Instructions:

HTML Structure:
- Create a standard HTML document.
- In the <body>, create a parent <div> with a class of "container".
- Inside the container, nest two or three child <div> elements with a class of "nested-box".
- Add some placeholder text in each nested box.
CSS Styling Requirements:
- Parent Container:
  - Set a fixed width (e.g., 400px), apply padding (e.g., 20px), a border (e.g., 3px solid #555), and a margin (e.g., 15px auto;) to center it.
  - Use box-sizing: border-box; for the parent.
- Nested Boxes:
  - For one nested box, use box-sizing: content-box; (the default) and for another, use box-sizing: border-box; (you can assign these via different classes or inline styles).
  - Set the same width (e.g., 100%) for each nested box and apply different padding and border values to see how they affect the inner layout.
- Observation:
  - Compare how the child boxes render when using content-box versus border-box in relation to the parent's dimensions. Notice how padding and borders either add extra space or are included within the specified width.
Objective:
Understand how nested elements behave with different box-sizing settings and observe the impact of padding and borders on parent and child dimensions within the box model.

Day 4: CSS Box Model—Margin, Padding, Border, Width, and Height