Display property in CSS - Browser Rendering Trace

Render Flow - Display property

Parse CSS

→Find 'display' property

↓

Calculate box model behavior

↓

Layout elements accordingly

↓

Paint elements on screen

The browser reads the CSS, finds the display property, decides how the element behaves visually (block, inline, none, etc.), then lays out and paints the element accordingly.

Render Steps - 3 Steps

Code Added:No CSS applied (default display)

Before

[DIV]
|__ [P] Paragraph 1
|
|__ [P] Paragraph 2

→

After

[DIV]
|__ [P] Paragraph 1
|
|__ [P] Paragraph 2

By default, paragraphs are block elements, so each paragraph appears on its own line stacked vertically.

🔧 Browser Action:Creates block boxes for each <p> element and stacks them vertically.

Code Sample

Two paragraphs inside a div, with paragraphs changed from block to inline, so they appear side by side.

CSS

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

CSS

p {
  display: inline;
}

Render Quiz - 3 Questions

After applying step 2 (p { display: inline; }), how do the paragraphs appear?

A Stacked vertically, each on its own line

B Hidden and not visible

C Side by side on the same line

D Overlapping each other

Common Confusions - 3 Topics

Why doesn't margin-top or margin-bottom work on inline elements?

Inline elements ignore vertical margins because they flow like text. Only horizontal margins affect spacing.

💡 Vertical margins don't apply to inline elements; use inline-block or block for vertical spacing.

Why does display:none remove the element completely, but visibility:hidden only hides it?

display:none removes the element from layout and painting, so no space is taken. visibility:hidden hides it visually but keeps its space.

💡 Use display:none to remove space, visibility:hidden to hide but keep space.

Why do block elements always start on a new line?

Block elements take full width by default, so the browser places them on separate lines to avoid overlap.

💡 Block = new line; inline = flow with text.

Property Reference

Property	Value Applied	Visual Effect	Common Use
display	block	Element takes full width, starts on new line	Default for <div>, <p>, <h1>-<h6>
display	inline	Element flows with text, width and height ignored	Default for <span>, <a>, <strong>
display	inline-block	Flows inline but respects width and height	Buttons, images with text
display	none	Element is hidden, takes no space	Hide elements
display	flex	Container arranges children in flexible row or column	Layout with flexible boxes
display	grid	Container arranges children in grid rows and columns	Grid layouts

Concept Snapshot

display property controls how elements appear visually. Common values: block (full width, new line), inline (flows with text), none (hidden). Inline ignores vertical margins; block elements stack vertically. Use display:none to hide and remove space. Use inline-block to combine inline flow with box sizing.

Practice

1. What does the CSS display: none; property do to an element on a webpage?

easy

A. It hides the element and removes it from the page layout.

B. It makes the element visible but transparent.

C. It changes the element to a block-level element.

D. It makes the element inline without line breaks.

Solution

1. Step 1: Understand the effect of display: none;

   This property hides the element completely and removes it from the page layout, so it takes no space.

2. Step 2: Compare with other display values

   Unlike visibility: hidden; which hides but keeps space, display: none; removes the element entirely.

3. Final Answer:

   It hides the element and removes it from the page layout. -> Option A

4. Quick Check:

   display: none; = hidden and no space [OK]

Hint: None means hidden and no space taken [OK]

Common Mistakes:

• Confusing with visibility: hidden
• Thinking it only makes element invisible but keeps space
• Mixing with display: inline or block

2. Which of the following is the correct CSS syntax to make an element a flex container?

easy

A. display-flex: true;

B. display = flex;

C. display: flex;

D. flex-display: block;

Solution

1. Step 1: Recall correct CSS property syntax

   CSS properties use a colon : to assign values, not equals =.

2. Step 2: Identify the correct property and value

   The property is display and the value to create a flex container is flex.

3. Final Answer:

   display: flex; -> Option C

4. Quick Check:

   Correct CSS syntax uses colon and display: flex; [OK]

Hint: Use colon, not equals, for CSS properties [OK]

Common Mistakes:

• Using equals sign instead of colon
• Incorrect property names like display-flex
• Adding extra words like true

3. Given this HTML and CSS, what will be the visible layout of the items?

<div class='container'>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

.container {
  display: flex;
  flex-direction: column;
}

medium

A. The items A, B, C appear as inline text separated by spaces.

B. The items A, B, C appear side by side horizontally.

C. The items A, B, C are hidden and not visible.

D. The items A, B, C appear stacked vertically in a column.

Solution

1. Step 1: Understand display: flex; with flex-direction: column;

   Flex container arranges children in a flexible box. The column direction stacks items vertically.

2. Step 2: Predict the layout of the spans

   Each <span> will appear one below the other in a vertical column.

3. Final Answer:

   The items A, B, C appear stacked vertically in a column. -> Option D

4. Quick Check:

   flex-direction: column; stacks vertically [OK]

Hint: Flex column stacks items vertically [OK]

Common Mistakes:

• Assuming flex always arranges horizontally
• Confusing inline elements with flex behavior
• Ignoring flex-direction property

4. You want to hide a paragraph but keep its space on the page. Which CSS property and value should you use? The following code does not work as expected:

p {
  display: none;
}

What is the correct fix?

medium

A. Use display: inline; to hide the paragraph

B. Change display: none; to visibility: hidden;

C. Add opacity: 0; instead of display

D. Change display: none; to display: block;

Solution

1. Step 1: Understand difference between display: none; and visibility: hidden;

   display: none; removes element and space, visibility: hidden; hides element but keeps space.

2. Step 2: Apply the correct property to keep space

   Use visibility: hidden; to hide content but preserve layout space.

3. Final Answer:

   Change display: none; to visibility: hidden; -> Option B

4. Quick Check:

   Keep space by using visibility: hidden; [OK]

Hint: Use visibility hidden to keep space but hide [OK]

Common Mistakes:

• Using display none and expecting space to remain
• Using opacity 0 but element still clickable
• Confusing display inline with hiding

5. You have a navigation bar with list items. You want the list items to appear horizontally with equal spacing and be centered. Which CSS display property and layout method should you use?

hard

A. Use display: flex; on the container with justify-content: space-around;.

B. Use display: block; on list items and text-align: center; on the container.

C. Use display: inline; on the container and margin: auto; on list items.

D. Use display: grid; on list items with grid-template-columns: repeat(3, 1fr);.

Solution

1. Step 1: Identify the container and desired layout

   The container holds list items that should be horizontal, spaced equally, and centered.

2. Step 2: Choose display and alignment properties

   display: flex; on container creates a flexible row layout. justify-content: space-around; spaces items evenly with space around them.

3. Final Answer:

   Use display: flex; on the container with justify-content: space-around;. -> Option A

4. Quick Check:

   Flex + justify-content space-around = horizontal equal spacing [OK]

Hint: Flex container with justify-content spaces items evenly [OK]

Common Mistakes:

• Applying display properties to wrong elements
• Using block display which stacks vertically
• Confusing inline display with container layout