CSS Display Properties: Understanding Layout Building Blocks

Common Display Values

Let's explore the most commonly used display values and understand their behaviors:

Block Display

When an element has display: block:

• It starts on a new line
• It stretches to fill the width of its container by default
• Width, height, margin, and padding properties are respected
• Examples: <div>, <p>, <h1>-<h6>, <section>

/* Block display example */
.block-element {
    display: block;
    width: 50%;
    margin: 20px auto;
    padding: 15px;
    background-color: #e9ecef;
}

Real-world analogy: Block elements are like paragraphs in a book—each one starts on a new line, has a clear beginning and end, and takes up the full width of the page by default.

Inline Display

When an element has display: inline:

• It flows with the text (doesn't start on a new line)
• It only takes up as much width as necessary
• Width and height properties are ignored
• Only horizontal margins and padding are respected (not vertical)
• Examples: <span>, <a>, <em>, <strong>

/* Inline display example */
.inline-element {
    display: inline;
    background-color: #d1ecf1;
    padding: 0 10px; /* Horizontal padding works */
    margin: 0 5px; /* Horizontal margin works */
    /* width and height would be ignored */
}

Real-world analogy: Inline elements are like words in a sentence—they flow from left to right, wrapping to a new line when they run out of space, and they only take up as much space as they need.

Inline-Block Display

When an element has display: inline-block:

• It flows with the text like an inline element
• It respects width, height, margin, and padding properties like a block element
• It's a hybrid that combines features of both inline and block
• Examples: <img>, <button>, <input>

/* Inline-block display example */
.inline-block-element {
    display: inline-block;
    width: 150px;
    height: 100px;
    margin: 10px;
    padding: 15px;
    background-color: #d4edda;
    vertical-align: middle; /* Controls alignment with other inline elements */
}

Real-world analogy: Inline-block elements are like photos in a text document—they flow with the text (inline), but they maintain their dimensions (block), allowing you to place them within text while still controlling their size.

None Display

When an element has display: none:

• It's completely removed from the document flow
• It doesn't take up any space
• It and all its children are invisible and non-interactive
• Screen readers will ignore these elements (important for accessibility)

/* None display example */
.hidden-element {
    display: none; /* Element disappears completely */
}

/* Compare with visibility: hidden */
.invisible-element {
    visibility: hidden; /* Element is invisible but still takes up space */
}

Important distinction: display: none removes the element completely, while visibility: hidden keeps the element in the layout but makes it invisible. Think of display: none as removing a book from the shelf, while visibility: hidden is like placing an invisible book on the shelf that still takes up space.

Flex Display

When an element has display: flex:

• It becomes a flex container
• Its children become flex items with new layout behaviors
• It enables powerful alignment and distribution features
• It provides one-dimensional layout control (in a row or column)

/* Flex display example */
.flex-container {
    display: flex;
    justify-content: space-between; /* Horizontal distribution */
    align-items: center; /* Vertical alignment */
    height: 200px;
    background-color: #f8f9fa;
}

.flex-item {
    width: 100px;
    height: 100px;
    background-color: #6c757d;
    color: white;
}

Real-world analogy: Flexbox is like a smart bookshelf with adjustable dividers that can automatically resize and rearrange books to make the most efficient use of space, while also keeping them perfectly aligned.

We'll cover Flexbox in much more detail in our next session, as it's a powerful layout system deserving of its own deep dive.

Grid Display

When an element has display: grid:

• It becomes a grid container
• Its children become grid items
• It enables two-dimensional layout (rows and columns)
• It allows precise placement in both dimensions

/* Grid display example */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Three columns with proportional widths */
    grid-template-rows: 100px 200px; /* Two rows with fixed heights */
    gap: 20px; /* Spacing between grid items */
    background-color: #f8f9fa;
}

.grid-item {
    background-color: #6c757d;
    color: white;
}

Real-world analogy: CSS Grid is like a spreadsheet or table layout system—it creates a framework of rows and columns, allowing elements to be placed precisely within the cells, span multiple cells, and align perfectly in two dimensions.

We'll explore CSS Grid in depth in a future session.