What is the Display Property?

The `display` property is one of the most important properties in CSS. It controls how an element is rendered in the page layout and how it interacts with other elements.

Every HTML element has a default display value. Understanding these defaults and knowing how to change them is essential for creating layouts.

Block-Level Elements

Block elements take up the full width available and always start on a new line.

CSS

/* These elements are block by default:
   div, p, h1-h6, ul, ol, li, section, article, header, footer, form */

.block-example {
  display: block;
  width: 100%;        /* Default behavior */
  background-color: #e8f4fd;
  padding: 20px;
  margin-bottom: 10px;
}

Block element characteristics:

Takes up the full width of its parent
Starts on a new line
Respects width, height, margin, and padding on all sides
Stacks vertically by default

CSS

.container {
  width: 600px;
  margin: 0 auto;
}

.box {
  display: block;
  background-color: #3498db;
  color: white;
  padding: 20px;
  margin-bottom: 10px;
}
/* Each .box will stack vertically, taking full 600px width */

Inline Elements

Inline elements only take up as much width as their content needs and do not start on a new line.

CSS

/* These elements are inline by default:
   span, a, strong, em, img, input, button, label, code */

.inline-example {
  display: inline;
  background-color: #fff3cd;
  padding: 2px 6px;
}

Inline element characteristics:

Only takes up as much width as needed
Does not start on a new line
Sits alongside other inline elements
Ignores width and height properties
Only respects horizontal margin and padding (left/right), not vertical

CSS

.tag {
  display: inline;
  background-color: #e8f4fd;
  padding: 4px 12px;     /* Left/right works, top/bottom won't push other elements */
  border-radius: 4px;
  font-size: 14px;
}
/* Multiple .tag elements will sit side by side on the same line */

Inline-Block

Inline-block combines the best of both worlds. Elements sit inline with other content but respect block-level properties like width and height.

CSS

.inline-block-example {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: #3498db;
  color: white;
  padding: 20px;
  margin: 5px;
  vertical-align: top;
}

Inline-block characteristics:

Sits alongside other elements (like inline)
Respects width, height, margin, and padding on all sides (like block)
Does not force a new line

Practical Inline-Block Uses

CSS

/* Navigation links */
nav a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #34495e;
  color: white;
  text-decoration: none;
  margin-right: 2px;
}

nav a:hover {
  background-color: #4a6fa5;
}

/* Grid-like layout with inline-block */
.gallery-item {
  display: inline-block;
  width: 30%;
  margin: 1%;
  vertical-align: top;
}

/* Buttons side by side */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-right: 8px;
}

Display None

The `display: none` property completely removes an element from the page layout. It takes up no space and is invisible.

CSS

.hidden {
  display: none;
}

/* Common use: hide on mobile */
.desktop-only {
  display: block;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

Display None vs Visibility Hidden

CSS

/* display: none - Element is removed from layout */
.removed {
  display: none;
  /* Takes up NO space, other elements fill the gap */
}

/* visibility: hidden - Element is invisible but still occupies space */
.invisible {
  visibility: hidden;
  /* Still takes up space in the layout */
}

Changing Default Display Values

You can change any element's display behavior. This is a common and powerful technique.

CSS

/* Make a list horizontal */
li {
  display: inline-block;
  margin-right: 10px;
}

/* Make a link behave like a block */
a.block-link {
  display: block;
  padding: 15px;
  background-color: #f5f5f5;
  text-decoration: none;
  color: #333;
  margin-bottom: 5px;
}

a.block-link:hover {
  background-color: #e8e8e8;
}

/* Make a span accept width/height */
span.badge {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  background-color: #e74c3c;
  color: white;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  font-size: 12px;
}

A Comparison Table

Here is a quick comparison of the display values:

block: Full width, new line, respects all sizing properties
inline: Content width only, same line, ignores width/height
inline-block: Content or set width, same line, respects all sizing properties
none: Completely removed from layout

Summary

The `display` property controls the fundamental layout behavior of elements. Block elements stack vertically and take full width. Inline elements flow with text and ignore width/height. Inline-block gives you the best of both. Use `display: none` to completely hide elements from the layout. Understanding display is essential before moving to more advanced layout systems like Flexbox and Grid.

In the next article, you will learn about CSS positioning.