Tutorials
CSS
Display Property

Display Property

The display property controls how elements are rendered on the page. It determines whether elements are block, inline, or use advanced layout modes like flexbox or grid.

What is the Display Property?

Display defines the type of box an element generates and how it interacts with other elements in the layout.

.element {
  display: block; /* Default for div, p, etc. */
}

Block Elements

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

.block-element {
  display: block;
}

Common block elements: div, p, h1-h6, ul, li, section, article, etc.

Inline Elements

Inline elements only take up as much width as needed and don’t start on new lines.

.inline-element {
  display: inline;
}

Common inline elements: span, a, strong, em, img, etc.

Inline-Block Elements

Combines inline and block behavior: flows with text but can have width/height.

.inline-block-element {
  display: inline-block;
}

None and Hidden

Hide elements completely or visually.

.hidden-element {
  display: none; /* Removed from document flow */
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Flexbox and Grid

Modern layout modes.

.flex-container {
  display: flex;
}

.grid-container {
  display: grid;
}

Table Display Values

Create table layouts without HTML table elements.

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

Practical Examples

Button Group

Create a group of buttons that behave like a single unit.

.button-group {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  background: #f8f9fa;
  cursor: pointer;
}

.button:not(:last-child) {
  border-right: 1px solid #ddd;
}

.button:hover {
  background: #e9ecef;
}

Card Layout

Use display properties to create card components.

.card {
  display: inline-block;
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 1rem;
  vertical-align: top; /* Align cards to top */
}

.card-header {
  padding: 1rem;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}

.card-content {
  padding: 1rem;
}

.card-footer {
  padding: 1rem;
  border-top: 1px solid #ddd;
  background: #f8f9fa;
}

Responsive Navigation

Change display based on screen size.

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-menu {
  display: flex;
  gap: 1rem;
}

.nav-toggle {
  display: none; /* Hidden by default */
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav-menu {
    display: none; /* Hide menu */
  }

  .nav-toggle {
    display: block; /* Show hamburger */
  }

  .nav-menu.open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
}

Image Gallery

Create a responsive image grid.

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.gallery-item {
  flex: 1 1 200px; /* Grow, shrink, base 200px */
  max-width: calc(33.333% - 1rem); /* 3 per row on large screens */
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .gallery-item {
    max-width: calc(50% - 0.5rem); /* 2 per row on tablets */
  }
}

@media (max-width: 480px) {
  .gallery-item {
    max-width: 100%; /* 1 per row on mobile */
  }
}

Tooltip

Create hover tooltips using display.

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  white-space: nowrap;
}

.tooltip-container:hover .tooltip {
  display: block;
}

Common Issues

Inline Elements with Width/Height

Inline elements ignore width and height.

/* This won't work */
.inline-element {
  display: inline;
  width: 200px;
  height: 100px;
}

/* Use inline-block instead */
.inline-element {
  display: inline-block;
  width: 200px;
  height: 100px;
}

Vertical Align

Inline and inline-block elements can use vertical-align.

.inline-element {
  vertical-align: middle; /* Align to middle of line */
}

Flexbox Gotchas

Some display values don’t work well with flexbox.

/* This won't create flex items */
.flex-container {
  display: flex;
}

.flex-item {
  display: block; /* Still works, but consider using inline-block if needed */
}

Best Practices

  1. Use semantic HTML elements with appropriate display
  2. Prefer flexbox/grid over display: table
  3. Use display: none for hiding, visibility: hidden for visual hiding
  4. Test layouts across different screen sizes
  5. Understand how display affects document flow

Browser Support

Display property is fully supported in all modern browsers:

  • Chrome: Full support
  • Firefox: Full support
  • Safari: Full support
  • Edge: Full support

External Resources:

Related Tutorials:

Last updated on
Overflow PropertyCSS Colors and Backgrounds