Display in CSS

In CSS, every element is treated as a box (this is the CSS Box Model). The display property decides:

• How an element will behave with its sibling (adjacent elements).
• How will the parent arrange for the children within it?

Categories of display values

The values ​​on display can be divided into 4 categories:

1. Outer display type: This determines how the element will be positioned relative to the elements around it on the page. Values are:
   1. Block-level
   1. Inline-level
2. Inner display type: The parent decides how the child elements within it should appear.
   1. Flow, Flow-root
   1. Flex
   1. Grid
   1. Table
   1. Ruby
3. box generation
   1. none
   1. Contents
4. List item display
   1. list-item

1.    Block

Starts on a new line. Occupies the entire available width of the parent (by default, width: auto).

• Height equals the content or the specified height.
• Margin, padding, height, and width can be applied.
• Example: <div>, <p>, and <h1> are blocks by default.

Example:

<style>
.block {
display:block;
background: lightblue;
}
</style>
<div class="block">Block Element 1</div>
<div class="block">Block Element 2</div>

Inline

Remains on the same line, does not start a new line. Width is limited to the content. Height is based on line height (setting height/width does not make a difference).

• We cannot set width & height of inline element.
• Example: <span>, <a> are inline by default.

<style>
.inline {
  display: inline;
  background: yellow;
}
</style>
<div class="inline">Inline Element 1</div>
<div class="inline">Inline Element 2</div>

Inline-block

Stays in same line (like a inline). But you can set the width and height like a block. It’s a hybrid of a line and a block.

<style>
.inline-block {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: pink;
}
</style>
<div class="inline-block">Item 1</div>
<div class="inline-block">Item 2</div>

none

The element is not rendered at all. It does not exist in the layout (as if deleted). It is also mostly ignored by screen readers and accessibility tools.

<style>
.hidden {
  display: none;
}
</style>

<p class="hidden">Not visible</p>

Most Important Question

What is the difference between inline, inline-block, and block elements?

• Inline: Stays inside the line, width/height cannot be set, margin/padding only works left-right. Example: <span>, <a>.
• Block: Starts on a new line, occupies full width, width/height, margin, padding all work. Example: <div>, <p>.
• Inline-block: Stays inside the line like inline, but width/height, margin, padding work like block. Example: <img>, <button>.

How does display: none differ from visibility: hidden?

display: none: The element is removed completely, taking up no space in the layout.

visibility: hidden: The element becomes invisible but retains its layout space.

Can we apply width and height to an inline element?

No. Width/height does not work on inline elements. If necessary, you have to use inline-block or block.

Why do inline elements ignore top and bottom margins?

According to CSS rules, the vertical margins of inline elements collapse. Therefore, the top and bottom margins have no visible effect.

Which HTML elements are block-level by default and which are inline by default?

• Block-level: <div>, <p>, <h1>–<h6>, <ul>, <ol>
• Inline: <span>, <a>, <strong>, <em>

How does inline-block fix the limitations of inline elements?

Height/width is not applied inline. In inline-block you can set height/width and the elements within the line remain aligned horizontally, without creating a new line.

What happens if we apply display: block to an inline element like <span>?

The element becomes block-level, starts on a new line, and occupies the entire width.

What happens to child elements if a parent element has display: none?

The parent element becomes invisible and all its child elements are also removed from the layout.

How does the display property affect the positioning of an element in the layout?

Display defines the outer behavior of the element: how it aligns in a line, how much width it occupies, and how it behaves with its siblings.

Can inline, inline-block, and block elements be nested inside each other? If yes, how do they behave?

• Block inside inline: The block element does not behave like inline automatically; it will start on a new line.
• Inline inside block: It behaves normally in the inline flow.
• Inline-block inside block: Stays in the same line like inline, but width, height, margin, padding can be applied like block.