Day 15: Display, Visibility & Overflow

on

💠 Day 15 — Display, Visibility & Flow

Hi guys,Welcome to Day 15! In Today's class, you’ll learn how elements behave on a web page — how they occupy space, interact with others, and control layout flow. Understanding display types and visibility is essential for creating flexible and responsive page structures.

🧩 1️⃣ What is the CSS Display Property?

The display property defines how an element is displayed on the page — whether as a block, inline, flex, or grid element. Each type affects positioning and spacing differently.

📘 2️⃣ Common Display Values

/* Default examples */
div { display: block; }
span { display: inline; }
nav { display: flex; }
  • block — starts on a new line and takes up full width (e.g., <div>, <p>)
  • inline — stays in line and only takes required width (e.g., <span>, <a>)
  • inline-block — inline positioning but allows width and height
  • none — hides the element completely

🧱 3️⃣ Inline vs Block Example

div {
  display: block;
  background: lightblue;
  margin: 10px;
}

span {
  display: inline;
  background: yellow;
  padding: 5px;
}

🔹 4️⃣ Inline-Block

Combines the best of both — elements appear inline but can have height, width, and margin. 

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1565c0;
  color: white;
  border-radius: 6px;
}

🧭 5️⃣ The Visibility Property

The visibility property controls whether an element is visible or hidden — but unlike display:none, it still occupies space even when hidden. 

p.hidden {
  visibility: hidden;
}

⚙️ 6️⃣ The Flow of Elements

HTML elements follow a natural flow — top to bottom, left to right. Block elements stack vertically; inline elements flow horizontally within a line. You can manipulate this flow with float, position, and flex properties.

💡 7️⃣ Display: None vs Visibility: Hidden

  • display: none — removes the element completely.
  • visibility: hidden — hides it but leaves empty space.

🎨 8️⃣ The “Flow Root” Concept

When you use display: flow-root;, it creates a new block formatting context — useful when dealing with floating elements. 

.container {
  display: flow-root;
}

🧠 9️⃣ Practice Task

  1. Create two <div> elements — one block, one inline.
  2. Experiment with display:inline-block to create button-like items.
  3. Hide an element with both display:none and visibility:hidden to see differences.

🧮 Mini Quiz

  • Q1: What’s the difference between inline and block?
  • Q2: Which property removes an element from layout flow?
  • Q3: What does flow-root do?

🎯 Summary

Today, you learned how display and visibility define the structure of your layout. With this understanding, you’re ready to explore **Typography & Web Fonts** next — a creative step into making your content look elegant and professional.

Comments

Post a Comment