• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Display

← Previous Next →

🔹 What is the display Property in CSS?

The display property in CSS determines how an element is displayed on the web page.
It is one of the most important layout properties in CSS.

🔸 Common display Values

Value Description
block Element starts on a new line and takes full width
inline Element does not start on a new line; width = content
inline-block Like inline, but allows setting width/height
none Hides the element completely (no layout space)
flex Enables Flexbox layout for a container
grid Enables Grid layout for a container

🔸 Syntax

element {
  display: value;
}

Example:

div {
  display: block;
}

🔸 display: none vs visibility: hidden

Property Effect on Layout
display: none Hides and removes from layout ✔️
visibility: hidden Hides but keeps layout space

🔸 Examples of Display Use

/* Hide an element */
.hide-me {
  display: none;
}

/* Make elements inline */
span {
  display: inline;
}

/* Display images like a block */
img {
  display: block;
}

/* Flex container */
.container {
  display: flex;
}

/* Grid container */
.grid-box {
  display: grid;
}

Practice Questions

Q1. Make a <div> not appear on the page using display.

Q2. Display list items (<li>) inline instead of as a block.

Q3. Create a .menu class that uses Flexbox layout.

Q4. Use display: grid for a container element.

Q5. Set an image to display: block and center it using margin.

Q6. Hide a paragraph using display.

Q7. Change a <span> to act like a block element.

Q8. Show two <div>s side-by-side using display: inline-block.

Q9. Create a class that hides elements and then show them on hover.

Q10. Set a navigation bar to use display: flex.

CSS Display Quiz

Q1: Which CSS property is used to control the box type of an element?

A. box-style
B. layout
C. display
D. type

Q2: What does display: none do?

A. Makes the element invisible but keeps space
B. Removes the element from layout
C. Fades out the element
D. Hides the element slowly

Q3: Which value causes an element to take full width and start on a new line?

A. inline
B. block
C. none
D. fixed

Q4: Which display value allows width and height on inline elements?

A. inline
B. block
C. inline-block
D. flex

Q5: What is the main use of display: flex?

A. Hide an element
B. Create a two-column layout
C. Enable flexible layout for children
D. Change font styles

Q6: Which value of display hides the element completely?

A. hidden
B. invisible
C. none
D. zero

Q7: Which display value is best for building a responsive navigation menu?

A. block
B. inline
C. flex
D. none

Q8: Which display type enables you to use CSS Grid layout?

A. grid
B. table
C. fixed
D. flow

Q9: What will display: inline-block allow that display: inline does not?

A. Float support
B. CSS animations
C. Width and height settings
D. Inline-level spacing

Q10: Which value will make an element disappear but still occupy space?

A. display: block; opacity: 0;
B. display: none;
C. visibility: hidden;
D. position: absolute;
← Previous Next →
Login
Go Back Top