CSS Full Course Day 6 [Hindi] 💻 | Block, Inline, Inline-block 🚀 | Mohit Decodes

📦 CSS Tutorial – Day 6: Block, Inline & Inline-block Elements

Welcome to Day 6 of the CSS Full Course [Hindi] by Mohit Decodes! Today we’ll explore the fundamental display behaviors in CSS — how elements behave as block, inline, and inline-block.

🔹 CSS Display Types Explained

  1. Block Elements
  2. Take full width available
  3. Start on a new line
  4. Examples: <div>, <p>, <h1>, <section>
  5. Can set width, height, margin, padding
  6. Inline Elements
  7. Take only as much width as needed
  8. Do not start on a new line
  9. Examples: <span>, <a>, <strong>, <img>
  10. Cannot set width or height (padding and margin horizontal only)
  11. Inline-block Elements
  12. Behave like inline elements (sit next to each other)
  13. But allow setting width, height, margin, and padding like block elements

⚙️ Example CSS:

css
CopyEdit
.block {
display: block;
width: 200px;
background-color: lightblue;
margin-bottom: 10px;
}

.inline {
display: inline;
background-color: lightgreen;
padding: 5px;
}

.inline-block {
display: inline-block;
width: 150px;
height: 50px;
background-color: lightcoral;
margin-right: 10px;
}

💡 Why Does It Matter?

  1. Understanding display types helps in layout and design control.
  2. Inline-block is useful for menu items, buttons, and small components aligned horizontally with custom sizing.
  3. Proper use avoids layout issues and improves responsiveness.