CSS Display Property in Hindi: Block, Inline, Inline-Block, None Explained with Examples

on
CSS Display Property in Hindi: Block, Inline, Inline-Block, None Explained with Examples

CSS Display Property Explained – Block, Inline, Inline-Block & None

SEO Title: CSS Display Property in Hindi: Block, Inline, Inline-Block, None Explained with Examples

Meta Description: Learn CSS display properties like block, inline, inline-block, and none in simple Hinglish with visual examples. Day 12 of our frontend development blog.

🧠 Introduction

Aapne ab tak HTML elements aur unka styling seekh liya hai. Lekin kabhi socha hai ki kisi element ka layout behavior kaise decide hota hai?

Answer hai – CSS display property.
Yeh property batati hai ki kisi element ka page pe kaise dikhna hai aur uska structure kya hoga.

🔍 Types of Display Property

CSS display property ke kuch common values hain:

Property Description
block Full width element, new line start karta hai
inline Same line me rahte hain, sirf content width
inline-block Like inline but allows height & width
none Element ko hide kar deta hai (remove from layout)

🧱 1. display: block;

  • Full width occupy karta hai
  • Hamesha new line me appear hota hai
<div style="display: block; background: yellow;">
  This is a block element
</div>

🧾 Common Block Elements:

  • <div>
  • <p>
  • <h1> to <h6>
  • <section>, <article>

🧵 2. display: inline;

  • Sirf jitni content ki width hoti hai, utna hi space leta hai
  • New line start nahi karta
<span style="display: inline; background: lightblue;">
  This is an inline element
</span>

🧾 Common Inline Elements:

  • <span>
  • <a>
  • <strong>, <em>

📏 3. display: inline-block;

  • Same line me rahte hain like inline
  • But aap width, height, margin, padding apply kar sakte ho
<div style="display: inline-block; width: 100px; height: 50px; background: lightgreen;">
  Inline Block
</div>

🙈 4. display: none;

  • Element bilkul remove ho jata hai layout se
  • Visible nahi hota page par
  • JavaScript me bhi use hota hai show/hide ke liye
<div style="display: none;">
  Ye text page par nahi dikhega
</div>

🎯 Real Use Case Example:

<style>
  .menu {
    display: inline-block;
    padding: 10px;
    background-color: lightgray;
    margin: 5px;
  }
</style>

<div class="menu">Home</div>
<div class="menu">About</div>
<div class="menu">Contact</div>

🖼️ Output: 3 boxes ek hi line me dikhte hain – like a horizontal menu bar.

🧪 Practice Task:

🧩 Try this:
Create 3 buttons using inline-block with different background colors and padding.
Then use display: none; on one button and observe the layout.

🧠 Bonus Tip: visibility: hidden vs display: none

Property Effect
display: none; Element layout se bhi remove ho jata hai
visibility: hidden; Element visible nahi hota, but space occupy karta hai

Comments

Post a Comment