Complete Web Designing Course for Beginners

Lesson 4.4 – Display Properties

🎨 Understanding Block, Inline, and Inline-Block Elements in CSS

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand the CSS Display Property

✅ Differentiate Block and Inline Elements

✅ Understand Inline-Block Elements

✅ Use Display Property Effectively

✅ Create Better Layouts

✅ Control Element Positioning

✅ Build Professional Website Structures

📖 Introduction

Every HTML element behaves differently on a webpage.

For example:

<h1>Welcome</h1>

<p>Learning CSS</p>

Output:

Welcome

Learning CSS

Each element starts on a new line.

Now look at:

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Contact</a>

Output:

Home About Contact

All links appear on the same line.

Why?

Because different HTML elements have different display behaviors.

This behavior is controlled by:

🖥️ CSS Display Property

🤔 What is Display Property?

The display property controls:

How an element appears on a webpage

Syntax

display:value;

Common Values:

display:block;

display:inline;

display:inline-block;

display:none;

🌟 Types of Display Properties

There are four main display types:

1️⃣ Block

2️⃣ Inline

3️⃣ Inline-Block

4️⃣ None

1️⃣ Block Elements

Block elements:

✅ Start on a new line

✅ Take full available width

✅ Can have width and height

Examples of Block Elements

<h1>

<p>

<div>

<section>

<header>

<footer>

Example

<h1>HTML</h1>

<h1>CSS</h1>

<h1>JavaScript</h1>

Output

HTML

CSS

JavaScript

Each appears on a new line.

🎯 Block Display

display:block;

Example

a{

display:block;

}

Result

Links move to separate lines.

Example

HTML

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Contact</a>

CSS

a{

display:block;

}

Output

Home

About

Contact

2️⃣ Inline Elements

Inline elements:

✅ Stay on the same line

✅ Only take required width

✅ Width and height usually do not work properly

Examples of Inline Elements

<a>

<strong>

<em>

Example

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Contact</a>

Output

Home About Contact

🎯 Inline Display

display:inline;

Example

h1{

display:inline;

}

HTML

<h1>HTML</h1>

<h1>CSS</h1>

<h1>JavaScript</h1>

Output

HTML CSS JavaScript

All headings appear on the same line.

🌟 Block vs Inline

Feature	Block	Inline
New Line	✅ Yes	❌ No
Full Width	✅ Yes	❌ No
Width Works	✅ Yes	❌ No
Height Works	✅ Yes	❌ No

3️⃣ Inline-Block Elements

Inline-block combines:

Block + Inline

Features:

✅ Stays on same line

✅ Width works

✅ Height works

✅ Margin works

✅ Padding works

Syntax

display:inline-block;

Example

HTML

<div>HTML</div>

<div>CSS</div>

<div>JavaScript</div>

CSS

div{

display:inline-block;

width:150px;

height:100px;

border:2px solid blue;

}

Output

+-------+ +-------+ +-------+

 HTML      CSS      JavaScript

+-------+ +-------+ +-------+

Boxes appear side by side.

Why Use Inline-Block?

Useful for:

✅ Cards

✅ Navigation Menus

✅ Product Boxes

✅ Gallery Layouts

🌟 Display None

Sometimes we want to hide elements.

Syntax

display:none;

Example

HTML

<p>

This text will disappear

</p>

CSS

p{

display:none;

}

Result

Text becomes invisible.

Why Use Display None?

Used for:

✅ Hide Menus

✅ Show/Hide Sections

✅ Responsive Design

✅ JavaScript Effects

🎯 Practical Example

HTML

<div class="box">

HTML

</div>

<div class="box">

CSS

</div>

<div class="box">

JavaScript

</div>

CSS

.box{

display:inline-block;

width:150px;

height:100px;

background-color:lightblue;

border:2px solid blue;

margin:10px;

text-align:center;

}

Output

Three boxes displayed side by side.

💻 Complete Practical Program

HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="box">

HTML

</div>

<div class="box">

CSS

</div>

<div class="box">

JavaScript

</div>

</body>

</html>

CSS

.box{

display:inline-block;

width:150px;

height:100px;

background-color:lightyellow;

border:2px solid orange;

margin:10px;

padding:20px;

font-size:20px;

text-align:center;

}

🎯 Expected Output

Three attractive boxes:

HTML   CSS   JavaScript

displayed side by side.

🏫 Real World Examples

Website Cards

display:inline-block;

Hidden Mobile Menu

display:none;

Blog Sections

display:block;

⚠️ Common Beginner Mistakes

Mistake 1

Using Width on Inline Elements

Wrong:

a{

width:200px;
}

Width may not work properly.

Use:

display:inline-block;

Mistake 2

Confusing Block and Inline

Remember:

Block = New Line

Inline = Same Line

Mistake 3

Using Display None Accidentally

display:none;

Element disappears completely.

🌟 Best Practices

✅ Use block for sections.

✅ Use inline for text elements.

✅ Use inline-block for cards and menus.

✅ Use display:none carefully.

✅ Understand element behavior before designing layouts.

🏆 Mini Project – Course Boxes

Create three boxes:

HTML

CSS

JavaScript

Apply:

✅ Width = 150px

✅ Height = 100px

✅ Inline-Block Display

✅ Border

✅ Background Color

📝 Practical Activity

Create a navigation menu:

Home

About

Courses

Contact

Display all items on the same line.

Then create:

HTML

CSS

JavaScript

Boxes displayed side by side.

📋 Assignment

Assignment 4.4

What is the display property?
What is a block element?
What is an inline element?
What is an inline-block element?
What does display:none do?
Create three boxes using inline-block.
Convert links into block elements.

🧠 Quiz

Q1. Which display type starts on a new line?

A. inline

B. inline-block

C. block

D. none

✅ Answer: C

Q2. Which display type stays on the same line?

A. block

B. inline

C. hidden

D. section

✅ Answer: B

Q3. Which display type allows width and height while staying on the same line?

A. block

B. inline

C. inline-block

D. none

✅ Answer: C

Q4. Which value hides an element completely?

A. hidden

B. invisible

C. display:none

D. remove

✅ Answer: C

Q5. Which element is normally inline?

A. div

B. p

C. h1

D. a

✅ Answer: D

📌 Lesson Summary

✅ Display property controls how elements appear.

✅ Block elements start on a new line.

✅ Inline elements stay on the same line.

✅ Inline-block combines features of both.

✅ Display none hides elements completely.

✅ Display properties are essential for webpage layouts.