Next ❯

CSS Display

  • Learn CSS display property to control element visibility and layout types like block, inline, and none.

  • What Is the CSS display Property ?

    The CSS display property controls how an HTML element behaves inside a page layout.

    It decides:

    • Does the element start on a new line or stay in the same line ?
    • Does it take full width or only the space it needs ?
    • Can width and height be applied ?
    • How does it align with nearby elements ?

    In simple words:

    display tells the browser how to place, size, and align an element.

    Almost every layout decision in CSS depends on display.

    Why Is display Important ?

    Using display, you can:

    Build page layouts
    Create navigation menus
    Show or hide elements
    Align items horizontally or vertically
    Create responsive designs

    Real-life comparison:
    Arranging furniture in a room
    • A bed takes full space
    • A chair takes only required space
    • A folding table can be hidden when not in use

    CSS Display Values 

    display: block

    What it does:

    • Starts on a new line
    • Takes full width of its parent
    • Allows width and height

    Common block elements:

    <div>, <p>, <h1>, <section>

Display: Block

display: block; makes an element start on a new line, take full width of its parent, and allow width and height. 

.box {
  display: block;
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

  • Always moves to a new line
    Occupies full horizontal space

    Real-life comparison:
    A bed in a room — it occupies its own full area.

    display: inline

    What it does:

    • Stays in the same line
    • Takes only content width
    • Width and height do NOT work

    Common inline elements:

    <span>, <a>, <strong>

Display: Inline

display: inline; makes an element stay on the same line and only take as much width as its content. 

span {
  display: inline;
  background-color: yellow;
}

  • Does not break layout
    Flows inside text

    Real-life comparison:
    Words inside a sentence.

    display: inline-block

    What it does:

    • Stays inline like inline elements
    • Allows width and height like block elements

Display: Inline-Block

display: inline-block; keeps elements inline while allowing width and height like block elements. 

.box {
  display: inline-block;
  width: 120px;
  height: 80px;
  background-color: coral;
  margin: 10px;
}

  • Elements stay in one line
    Size can be controlled

    Real-life comparison:
    Chairs placed side-by-side with fixed size.

    display: none

    What it does:

    • Completely removes the element
    • Takes no space
    • Not visible at all

Display: None

display: none; completely removes an element from the page layout so it takes no space and is not visible. 

.hidden {
  display: none;
}

  • Element disappears fully

    Real-life comparison:
    A folded chair stored away.

    display: none vs visibility: hidden

    display: nonevisibility: hidden
    No space takenSpace remains
    Fully removedInvisible only
    Not in layoutStill in layout

    display: flex

    What it does:

    • Turns an element into a flex container
    • Aligns children easily
    • One-direction layout (row or column)

Display: Flex

display: flex; turns an element into a flex container, making it easy to align and arrange its children in a row or column. 

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

  • Easy alignment
    Responsive by default

    Common flex properties:

    • justify-content
    • align-items
    • flex-direction
    • gap

    Real-life comparison:
    People standing in a line with equal spacing.

    display: grid

    What it does:

    • Creates two-dimensional layouts
    • Works with rows and columns

Display: Grid

display: grid; creates a two-dimensional layout system using rows and columns for precise placement of elements. 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  height: 100px;
  background-color: lightpink;
}

  • Perfect for complex layouts
    Excellent structure and control

    Real-life comparison:
    A chessboard or spreadsheet layout.

Inline-Block Layout Example

inline-block allows elements to sit side by side while still supporting width and height, useful for simple structured layouts. 

<!DOCTYPE html>
<html>
<head>
    <title>Inline-Block Comparison</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        div {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: skyblue;
            margin: 5px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</body>
</html>

  • Boxes appear side-by-side
    Size is fully controlled

    Common Mistakes

    Expecting width to work on inline elements
    Using display: none instead of visual hiding
    Using grid when flex is enough
    Not understanding default display behavior

    Best Practices for Using display

    Use block for page sections
    Use inline for text-level elements
    Use inline-block for buttons and badges
    Use flex for alignment and spacing
    Use grid for complex layouts

    • Block → takes full row
    • Inline → stays in text flow
    • Inline-block → flexible inline box
    • None → completely removed
    • Flex → one-direction layout
    • Grid → full layout system

    display controls element behavior
    Different values solve different layout problems
    Flex and Grid are modern layout tools
    Mastering display is essential for CSS layouts

Next ❯