NS
Guest Mode:

BCA Student Stories & UpdatesLive

Live GitHub Pages
You
Your StorySign in & share
Er. Manoj Kumar
D5
Er. ManojActive nowPages
Day 12CSS Layouts2 Hours Practical
Push to GitHub to Complete

CSS Display Property: Block, Inline, Inline-Block & None

The `display` property is the fundamental switch controlling how an element participates in CSS formatting contexts.

Interactive Learning Roadmap

Day 12 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Master block-level vs inline-level element behavior in normal document flow.
✔Understand why inline elements ignore top/bottom margin and explicit height/width.
✔Use `inline-block` to create multi-item button bars and inline tags.
✔Contrast `display: none` (removes element from layout flow) vs `visibility: hidden` (leaves invisible blank space).
Day 12 MasterclassCSS Layouts

CSS Display Property: Block, Inline, Inline-Block & None — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

The `display` property is the fundamental switch controlling how an element participates in CSS formatting contexts.

block: Starts on a new line and stretches across full available container width (e.g. <div>, <h1>, <p>).
inline: Does not start on a new line; only occupies space needed for its content. Width and height properties have NO effect.
inline-block: Sits in a line with surrounding text, but respects width, height, padding, and vertical margins.
display: none completely removes the element from rendering tree (zero layout footprint).
Dimaag Mein Bithane Ka Model

"Block is like a full-width parking spot for a bus. Inline is like words flowing on a typed line. Inline-block is like a picture stamp glued right inside a sentence."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

Converting list items into interactive inline-block pill buttons.

Horizontal Button Bar with inline-blockhtml
<style>
  .tag-item {
    display: inline-block;
    padding: 8px 16px;
    background: #000000;
    color: #ffffff;
    border-radius: 20px;
    margin-right: 8px;
    font-size: 13px;
    font-weight: bold;
  }
</style>
<span class="tag-item">HTML5</span>
<span class="tag-item">CSS3</span>
<span class="tag-item">JavaScript</span>

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 12 Practical Task Test Studio

Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Apply display: inline-block

Add `display: inline-block;` to .btn-link.

⏳ WAITING
Task 2Add Padding and Margin

Add `padding: 8px 18px;` and `margin-right: 10px;`.

⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing Active
Tab inserts 2 spaces • Live DOM refresh328 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
Live
Renders live HTML & CSS typed on the left.
Interactive Bug Detective

Spot the Bug: Width Ignored on Inline Anchor Tag

Tap or click on the exact line below that contains the error:

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
a.hero-btn {
2
display: inline;
3
width: 220px;
4
height: 50px;
5
padding: 10px;
6
}
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Elements with display: inline strictly ignore width and height CSS properties according to the W3C CSS specification.

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 nav-display.html

Homework Task: Tech Skill Badge Cloud

  • •Create folder `day-12` with `index.html`.
  • •Create a skill cloud section containing 8 developer skill badges (e.g. Linux, Git, HTML, C, Python).
  • •Style each badge with `display: inline-block`, distinct background colors, and `cursor: pointer`.
  • •Add a secret badge with class `.hidden-badge` styled with `display: none`.
Submission Evaluation Criteria: Inspect element in browser to verify inline-block layout and absence of DOM reflow issues.
Exact Assignment Solution Code: nav-display.html

Open Visual Studio Code on your PC (code .), create nav-display.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BCA Day 12 - CSS Display Modes Comparison</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #0f172a;
      color: #f1f5f9;
      padding: 32px 16px;
      line-height: 1.6;
    }
    .wrapper {
      max-width: 720px;
      margin: 0 auto;
      background: #1e293b;
      padding: 28px;
      border-radius: 16px;
      border: 1px solid #334155;
    }
    h1 { font-size: 22px; color: #38bdf8; margin-bottom: 16px; }
    .demo-section {
      background: #0f172a;
      padding: 16px;
      border-radius: 12px;
      margin: 16px 0;
      border: 1px solid #334155;
    }
    .demo-title { font-size: 13px; font-weight: bold; color: #fbbf24; margin-bottom: 8px; }
    
    /* Display: inline (No width/height respect) */
    .inline-item {
      display: inline;
      background: #2563eb;
      color: white;
      padding: 4px 8px;
      margin: 4px;
      border-radius: 4px;
    }
    
    /* Display: block (Takes full width) */
    .block-item {
      display: block;
      background: #059669;
      color: white;
      padding: 8px 12px;
      margin: 6px 0;
      border-radius: 6px;
    }
    
    /* Display: inline-block (Horizontal flow + accepts width/height) */
    .inline-block-item {
      display: inline-block;
      width: 130px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #7c3aed;
      color: white;
      margin: 4px;
      border-radius: 8px;
      font-weight: 600;
    }
    
    /* Display: none (Completely hidden from flow) */
    .hidden-item {
      display: none;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <h1>CSS Display Property in Action</h1>
    
    <div class="demo-section">
      <div class="demo-title">1. Inline (Flows like text, ignores width/height):</div>
      <span class="inline-item">Item One</span>
      <span class="inline-item">Item Two</span>
      <span class="inline-item">Item Three</span>
    </div>

    <div class="demo-section">
      <div class="demo-title">2. Block (Full width, stacks vertically):</div>
      <div class="block-item">Block Item A (100% available width)</div>
      <div class="block-item">Block Item B (Stacks onto next line)</div>
    </div>

    <div class="demo-section">
      <div class="demo-title">3. Inline-Block (Horizontal navbar pills with precise width/height):</div>
      <div class="inline-block-item">BCS-011</div>
      <div class="inline-block-item">BCSL-013</div>
      <div class="inline-block-item">BCS-012</div>
      <div class="inline-block-item">FEG-02</div>
    </div>
  </div>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

What is the visual difference between `display: none` and `visibility: hidden`?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-12
Create a new project folder (day-12)
2$
cd day-12
Change working directory to day-12
3$
git add .
Stage all modified files and new assets for commit
4$
git commit -m "Day 12: CSS display modes, block vs inline-block and badge cloud"
Commit staged changes with a descriptive message
5$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ Required
VS Code Implementation
Step 4 Viva Check
Own GitHub Project
Required

Exact GitHub Setup Guide & Expected Structure

Day 12 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-12/ or bca-day-12/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 12
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 12
4$
mkdir day-12
Create a new project folder (day-12)
5$
cd day-12
Change working directory to day-12
6$
# 3. Create your code file: index.html
7$
# (Write your Day 12 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 12: CSS Display Property: Block, Inline, Inline-Block & None"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.
2.Separate Day Folders: Create a new folder day-12/ for today so you don't overwrite previous days.
3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.
📁 github.com/YOUR_USERNAME/html-css-projects
Branch: main
README.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/✨ CREATE THIS FOLDER FOR TODAY (Day 12)
└──index.htmlMust contain: display: block, display: inline, display: inline-block, display: none
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 12 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 11: CSS Box Model: Margin, Border, Padding & Content first.

Complete Day 11 First
Day 11: CSS Box Model: Margin, Border, Padding & Content
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal