CSS Display


🔹 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.


Go Back Top