CSS Display

Learn how to control element rendering with the CSS display property

Understanding CSS Display

The CSS display property determines how an element is rendered in the document flow. It's one of the most important properties for controlling layout and element behavior.

Common Display Values:

block: Takes up full width, starts on new line
inline: Takes minimum width, flows with text
inline-block: Flows with text but can have dimensions
flex: Creates flexible box layout
grid: Creates grid layout
none: Removes element from document flow

1. Block Display

/* Block elements */
.block-element {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 20px;
}

/* Common block elements */
div, p, h1, section, article {
    /* These are block by default */
    margin-bottom: 1em;
}

/* Converting inline to block */
.nav-link {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

2. Inline Display

/* Inline elements */
.inline-element {
    display: inline;
    /* width and height have no effect */
    padding: 0 5px;
}

/* Common inline elements */
span, a, strong, em {
    /* These are inline by default */
    color: #007bff;
}

/* Converting block to inline */
.menu-item {
    display: inline;
    margin: 0 10px;
}

3. Inline-Block Display

/* Inline-block elements */
.inline-block {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    vertical-align: top;
}

/* Navigation menu */
.nav-item {
    display: inline-block;
    padding: 10px 20px;
    background: #f8f9fa;
    border-radius: 4px;
}

/* Image gallery */
.gallery-item {
    display: inline-block;
    width: 150px;
    margin: 10px;
    vertical-align: middle;
}

4. Flex Display

/* Flex container */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Flex items */
.flex-item {
    flex: 1;
    padding: 20px;
}

/* Navigation with flex */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #333;
    color: white;
}

5. Grid Display

/* Grid container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

/* Grid items */
.grid-item {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 4px;
}

/* Responsive grid */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

6. Display None

/* Hide elements */
.hidden {
    display: none;
}

/* Toggle visibility */
.toggle-content {
    display: none;
}

.toggle-content.active {
    display: block;
}

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

7. Table Display

/* Table layout */
.table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

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

.table-cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ddd;
}

/* Responsive table */
@media (max-width: 768px) {
    .table {
        display: block;
    }
    .table-row {
        display: block;
        margin-bottom: 1rem;
    }
    .table-cell {
        display: block;
        border: none;
        border-bottom: 1px solid #ddd;
    }
}

8. Practical Examples

/* Desktop navigation */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

/* Mobile navigation */
@media (max-width: 768px) {
    .nav {
        flex-direction: column;
    }
    
    .nav-links {
        display: none;
    }
    
    .nav-links.active {
        display: flex;
        flex-direction: column;
    }
}

Card Layout

/* Card container */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

/* Individual card */
.card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid #eee;
}

Form Layout

/* Form container */
.form {
    display: grid;
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Form group */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Inline form group */
.form-group-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Form controls */
.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

9. Display vs Visibility

/* Display: none - removes from document flow */
.hidden-display {
    display: none;
}

/* Visibility: hidden - keeps space in document */
.hidden-visibility {
    visibility: hidden;
}

/* Opacity: 0 - keeps space and events */
.hidden-opacity {
    opacity: 0;
}

Best Practices

Display Guidelines:

Choose appropriate display: Use the right display type for your layout needs
Consider semantics: Use display that matches element purpose
Plan for responsiveness: Consider how display changes on different screens
Mind accessibility: Hidden elements should be properly hidden from screen readers
Use modern layouts: Prefer flex/grid over older display types when possible

Common Issues

Display Problems:

Inline height/width: Not working on inline elements
Flex/Grid context: Properties only work on direct children
Hidden content: Still accessible via keyboard navigation
Mobile layouts: Display changes causing layout shifts
Performance: Frequent display changes affecting rendering