CSS Display Practice Questions with Solutions

By /

Introduction

The CSS display property controls how an HTML element appears on a webpage. It determines whether an element behaves like a block, inline, inline-block, or is hidden completely. Understanding the display property is essential for creating layouts, navigation menus, buttons, and responsive web pages. In this chapter, you’ll practice CSS display properties through simple solved questions that are easy for beginners to understand. CSS Display practice questions with solutions help to understand the concepts.

Question 1: Display an Element as a Block

Problem Statement

Write CSS to display a <span> element as a block-level element.

CSS Code

span {
    display: block;
}

Output

The <span> starts on a new line and takes up the full available width.

Explanation

  • display: block; changes the <span> from an inline element to a block element.
  • Block elements always begin on a new line.
  • They occupy the full width available by default.

Question 2: Display an Element as Inline

Problem Statement

Write CSS to display a <div> element as an inline element.

CSS Code

div {
    display: inline;
}

Output

The <div> appears on the same line as surrounding elements.

Explanation

  • display: inline; removes the block behavior.
  • Inline elements do not start on a new line.
  • Width and height properties do not work properly on inline elements.

Question 3: Display an Element as Inline-Block

Problem Statement

Write CSS to display a <div> as an inline-block element.

CSS Code

div {
    display: inline-block;
}

Output

The <div> appears on the same line as other elements while allowing custom width and height.

Explanation

  • inline-block combines features of both inline and block elements.
  • The element stays on the same line.
  • Width, height, margin, and padding work normally.

Question 4: Hide an Element

Problem Statement

Write CSS to completely hide a paragraph from the webpage.

CSS Code

p {
    display: none;
}

Output

The paragraph does not appear on the webpage.

Explanation

  • display: none; removes the element from the page layout.
  • The hidden element does not occupy any space.
  • It is commonly used for menus, popups, and responsive designs.

Question 5: Show a Hidden Element

Problem Statement

Write CSS to display a previously hidden <div> as a block element.

CSS Code

div {
    display: block;
}

Output

The hidden <div> becomes visible and behaves like a normal block element.

Explanation

  • display: block; makes the element visible again.
  • The element starts on a new line.
  • It occupies the available width by default.

Question 6: Display List Items Horizontally

Problem Statement

Write CSS to display all list items in a single horizontal row.

CSS Code

li {
    display: inline;
}

Output

All list items appear side by side on the same line.

Explanation

  • display: inline; makes each list item behave like an inline element.
  • The items no longer start on a new line.
  • This technique is commonly used for simple navigation menus.

Question 7: Create an Inline Navigation Menu

Problem Statement

Write CSS to create a horizontal navigation menu using inline-block.

CSS Code

li {
    display: inline-block;
    margin-right: 15px;
}

Output

The navigation items appear:

  • In a horizontal row
  • With 15px spacing between each item

Explanation

  • inline-block places the items on the same line.
  • margin-right creates space between the menu items.
  • Unlike inline, inline-block supports width and height.

Question 8: Hide an Element Without Removing Its Space

Problem Statement

Write CSS to hide a paragraph while keeping its space in the page layout.

CSS Code

p {
    visibility: hidden;
}

Output

The paragraph is not visible, but its space remains reserved in the layout.

Explanation

  • visibility: hidden; hides the element without removing it from the page layout.
  • The hidden element still occupies its original space.
  • This is different from display: none;, which removes both the element and its space.

Question 9: Create a Flex Container

Problem Statement

Write CSS to make a <div> a Flexbox container.

CSS Code

div {
    display: flex;
}

Output

All child elements inside the <div> are arranged using the Flexbox layout.

Explanation

  • display: flex; enables the Flexbox layout.
  • Child elements become flex items.
  • Flexbox makes it easier to create responsive layouts.

Question 10: Create a Grid Container

Problem Statement

Write CSS to make a <div> a CSS Grid container.

CSS Code

div {
    display: grid;
}

Output

The <div> becomes a Grid container, allowing child elements to be arranged in rows and columns.

Explanation

  • display: grid; enables the CSS Grid layout.
  • Child elements can be organized into rows and columns.
  • Grid is ideal for creating structured page layouts.

Key Takeaways

  • display: block; makes an element start on a new line.
  • display: inline; places elements on the same line.
  • display: inline-block; combines inline positioning with block sizing.
  • display: none; hides an element and removes it from the layout.
  • visibility: hidden; hides an element but keeps its space.
  • display: flex; creates a Flexbox container.
  • display: grid; creates a Grid container for two-dimensional layouts.

Frequently Asked Questions (FAQs)

1. What is the CSS display property?

The display property controls how an HTML element is displayed on a webpage.

2. What is the difference between block and inline?

  • block elements start on a new line and use the available width.
  • inline elements stay on the same line and only use the space they need.

3. What is inline-block?

inline-block allows an element to stay on the same line while supporting width, height, margin, and padding.

4. What is the difference between display: none; and visibility: hidden;?

  • display: none; hides the element and removes it from the layout.
  • visibility: hidden; hides the element but keeps its space in the layout.

5. When should I use display: flex;?

Use display: flex; when you want to arrange child elements in a flexible row or column layout.

6. When should I use display: grid;?

Use display: grid; when you need to create layouts with rows and columns.

7. Which display value is best for navigation menus?

display: inline-block; is commonly used for navigation menus because it keeps items on one line while allowing spacing and sizing.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top