beginnerPhase 31 · CSS

Display Property

Compare block, inline, inline-block, none, flex, and grid display values.

30m

0 problems

Topic Progress0%

Block vs Inline

Block-level Elements

Start on a new line
Take up full width available
Can set width and height
Stack vertically

<div>Block element</div>
<p>Block element</p>
<h1>Block element</h1>

div {
  width: 200px;
  height: 100px;
  background: blue;
}

Inline Elements

Flow with text
Only take up necessary width
Cannot set width/height (ignored)
Horizontal spacing with margins/padding

<span>Inline</span> <span>elements</span>

span {
  width: 200px; /* Ignored! */
  height: 100px; /* Ignored! */
  background: red;
}

Inline-block Elements

Flow with text (like inline)
Can set width/height (like block)

.inline-block {
  display: inline-block;
  width: 100px;
  height: 50px;
}

Common Block Elements

div, p, h1-h6, section, article, header, footer, nav, form, table

Common Inline Elements

span, a, strong, em, img, input, label, button

Display Values

display: block

.item {
  display: block;
  width: 100%;
}

display: inline

.item {
  display: inline;
  /* width/height ignored */
}

display: inline-block

.item {
  display: inline-block;
  width: 150px;
  height: 80px;
  vertical-align: top;
}

display: flex

.container {
  display: flex;
  gap: 20px;
}

display: grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

display: table

Simulates table behavior:

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
}

display: list-item

Makes element behave like <li>:

.custom-item {
  display: list-item;
  list-style-type: disc;
  margin-left: 20px;
}

display: contents

Makes element disappear, children become direct children of parent:

.wrapper {
  display: contents;
}
/* Children act as if wrapper doesn't exist */

Display none

display: none

Completely removes element from the document:

.hidden {
  display: none;
}

Characteristics:

Element is not rendered
Element is not in the accessibility tree
Takes up no space
Can be toggled with JavaScript

visibility: hidden

Hides element but preserves space:

.invisible {
  visibility: hidden;
}

Characteristics:

Element is not visible
Element still takes up space
Still in the DOM

Comparison

/* Both hide the element */
.hide-a { display: none; }     /* No space preserved */
.hide-b { visibility: hidden; } /* Space preserved */

JavaScript Toggle Pattern

// Toggle visibility
element.style.display = element.style.display === 'none' ? 'block' : 'none';

// Better: toggle class
element.classList.toggle('hidden');

.hidden {
  display: none;
}

Accessibility Considerations

display: none removes from accessibility tree
visibility: hidden keeps in tree but marks as hidden
Use aria-hidden="true" for screen readers
Use role="presentation" for decorative elements

Practice Problems

0/3solved

intermediateBuild Display Property Component

Create a reusable React component implementing Display Property. Include proper state management and accessibility.

Solution

// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed

intermediateDisplay Property Testing

Write unit and integration tests for Display Property using React Testing Library.

Solution

// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests

intermediateDisplay Property Performance

Optimize Display Property for performance. Consider memoization, code splitting, and bundle size.

Solution

// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Flashcards

Question

What is the difference between block and inline elements?

Click to reveal answer

Answer

Block elements start on new lines and take full width. Inline elements flow with text and only take necessary width.

Question

What does display: inline-block do?

Click to reveal answer

Answer

Makes an element inline (flows with text) but allows setting width and height like a block element.

Question

When would you use display: none vs visibility: hidden?

Click to reveal answer

Answer

Use display: none when you want to remove element from layout. Use visibility: hidden when you want to hide but keep the space.

Question

What does display: contents do?

Click to reveal answer

Answer

Makes the element itself invisible, and its children act as direct children of the parent element.

Question

Can you set width/height on inline elements?

Click to reveal answer

Answer

No, width and height properties are ignored on inline elements. Use inline-block or block instead.

Revision Notes

Key Takeaways

1.Block elements take full width and start on new lines
2.Inline elements flow with text and ignore width/height
3.inline-block combines inline flow with block sizing
4.display: none completely removes element from layout
5.visibility: hidden hides element but keeps its space

Interview Tips

•Explain the difference between block, inline, and inline-block
•Know when to use display: none vs visibility: hidden
•Understand the accessibility implications of hiding elements
•Be familiar with display: contents and its use cases

Cheat Sheet