Day 8 – CSS Box Model, Margin, Padding, Border, Display & Visibility

Anime Day 8 – CSS Box Model, Margin, Padding, Border, Display & Visibility
Anime

Day 8 – CSS Box Model, Margin, Padding, Border, Display & Visibility

August 3, 2025

🧱 Day 8 – CSS Box Model, Margin, Padding, Border, Display & Visibility

📥 Download Notes + Example Code (PDF):
👉 Click here to download Day 8 Notes

📚 Introduction

Understanding the CSS Box Model is one of the most important steps in becoming a front-end web developer. If your layouts look broken, misaligned, or messy, the solution often lies in how well you use margins, padding, borders, and display properties.

In this blog post, we’ll cover:

  • CSS Box Model

  • Margin, Padding, Border

  • Display and Visibility properties
    With code examples and best practices.

🧱 1. What Is the CSS Box Model?

The CSS Box Model treats every HTML element like a rectangular box with 4 layers:

  1. Content – Actual text/image inside the box

  2. Padding – Space between content and border

  3. Border – The line around the element

  4. Margin – Space outside the element (between it and others)

🖼 Think of it like a photo frame:

  • The photo is content

  • The space inside the frame is padding

  • The wooden edge is the border

  • The gap between two frames on the wall is the margin

✍️ Example – Box Model CSS

html:
<div class="box">
Hello, I'm a styled box!
</div>
css:
.box {
margin: 20px;
padding: 15px;
border: 2px solid black;
background-color: lightblue;
}

🔹 This example adds spacing inside, outside, and around a div box.

🎯 2. Margin, Padding, and Border in Detail

Property Purpose Example
margin Creates space outside the element margin: 10px;
padding Creates space inside the element padding: 15px;
border Adds a visible line around the element border: 2px solid #000;

📌 You can set each side separately:

css
margin-top: 10px;
padding-left: 20px;
border-bottom: 1px dashed red;

👁️ 3. CSS Display & Visibility

CSS display and visibility control how an element appears on the page.

display values:

  • block – Occupies full width (like <div>, <h1>)

  • inline – Flows within text (like <span>, <a>)

  • inline-block – Allows width/height, but still flows inline

  • none – Completely removes the element from the layout

visibility values:

  • visible – Default; element is shown

  • hidden – Element is invisible but space remains

🧪 Example:

css
h1 {
display: none;
/* Completely hides it */
}
p {
visibility: hidden;
/* Hides it but keeps the space */
}

🛠️ Real-World Example

html
<div class="card">
<h2>Product Title</h2>
<p>Description of the product goes here.</p>
</div>
css
.card {
background-color: #fff;
padding: 20px;
margin: 20px;
border: 1px solid #ccc;
display: inline-block;
}

This kind of styling is perfect for product listings, testimonials, or feature boxes on websites.

✅ Best Practices

  • Use margin for external spacing, padding for internal spacing

  • Always define borders in pixels or rem for consistency

  • Combine display and visibility wisely for dynamic UI

  • Use browser inspect tools to debug spacing/layout issues

Leave a Reply

Your email address will not be published. Required fields are marked *