DEV Community

Raizo-03
Raizo-03

Posted on

DAY 6 OF CSS

The Mystery of Disappearing Elements

Today I discovered that there's more than one way to hide an element in CSS, and each method has different effects on layout! Understanding display and visibility properties opened up a whole new world of layout control.

CSS Display Property: The Layout Controller

The display property is fundamental to CSS layouts. It determines how an element participates in the document flow and how it's rendered.

Block Elements 

.block-example {
    display: block;
    width: 100%;
    background-color: lightblue;
    padding: 10px;
    margin: 10px 0;
}
Enter fullscreen mode Exit fullscreen mode

Block elements:

  • Take up the full width available
  • Start on a new line
  • Stack vertically
  • Examples: div, p, h1-h6, section

Inline Elements 

.inline-example {
    display: inline;
    background-color: yellow;
    padding: 5px;
    /* Note: width and height have no effect on inline elements */
}
Enter fullscreen mode Exit fullscreen mode

Inline elements:

  • Only take up as much width as needed
  • Don't break to new lines
  • Sit side by side
  • Can't have width/height set
  • Examples: span, a, em, strong

Inline-Block: Best of Both Worlds 

.inline-block-example {
    display: inline-block;
    width: 150px;
    height: 100px;
    background-color: lightgreen;
    padding: 10px;
    margin: 5px;
}
Enter fullscreen mode Exit fullscreen mode

Inline-block elements:

  • Sit side by side like inline elements
  • Can have width and height like block elements
  • Perfect for creating horizontal layouts
  • Great for navigation menus and button groups

The Display: None Technique 

.hidden-element {
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

When you use display: none:

  • Element completely disappears from the page
  • Takes up no space in the layout
  • Other elements move up to fill the gap
  • Element is not accessible to screen readers

CSS Visibility Property: The Space Keeper

The visibility property offers a different approach to hiding elements:

.invisible-element {
    visibility: hidden;
}

.visible-element {
    visibility: visible; /* Default value */
}
Enter fullscreen mode Exit fullscreen mode

Key differences with visibility: hidden:

  • Element becomes invisible but keeps its space
  • Layout remains unchanged
  • Other elements don't move
  • Still takes up room in the document flow

Display vs Visibility: The Showdown

Property Element Visibility Takes Up Space Affects Layout
display: none Hidden No Yes
visibility: hidden Hidden Yes No
visibility: visible Visible Yes No

Advanced Display Values

Flex Display 

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Grid Display 

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Table Display 

.table-display {
    display: table;
}

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

.table-cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ccc;
}
Enter fullscreen mode Exit fullscreen mode

Practical Examples I Built Today

1. Responsive Navigation Toggle 

.mobile-menu {
    display: none;
}

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

    .mobile-menu {
        display: block;
    }
}
Enter fullscreen mode Exit fullscreen mode

2. Show/Hide Content with JavaScript 

.content-panel {
    display: block;
    transition: all 0.3s ease;
}

.content-panel.hidden {
    display: none;
}

/* Alternative approach that allows transitions */
.content-panel.invisible {
    visibility: hidden;
    opacity: 0;
}
Enter fullscreen mode Exit fullscreen mode

3. Creating a Horizontal Button Group 

.button-group {
    display: flex;
    gap: 10px;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

When to Use What?

Use display: none when:

  • You want to completely remove an element from layout
  • Creating responsive designs (hide/show different content)
  • Toggling UI elements with JavaScript
  • Building dropdown menus or modals

Use visibility: hidden when:

  • You want to temporarily hide content without affecting layout
  • Creating fade-in/fade-out animations
  • Maintaining consistent spacing
  • Building image galleries or slideshows

Use display: block/inline/inline-block when:

  • Changing the natural display behavior of elements
  • Creating custom layouts
  • Building responsive designs
  • Styling navigation menus

Common Gotchas I Encountered

  1. Inline elements ignore width/height 
/* This won't work as expected */
span {
    width: 200px;  /* Ignored! */
    height: 100px; /* Ignored! */
}

/* Solution: Use inline-block */
span {
    display: inline-block;
    width: 200px;  /* Works! */
    height: 100px; /* Works! */
}
Enter fullscreen mode Exit fullscreen mode
  1. Margins behave differently 
/* Inline elements: only left/right margins work */
.inline-element {
    margin: 20px; /* Only left/right applied */
}

/* Block elements: all margins work */
.block-element {
    margin: 20px; /* All sides applied */
}
Enter fullscreen mode Exit fullscreen mode
  1. Accessibility considerations 
/* Hidden from screen readers */
.hidden {
    display: none;
}

/* Still announced by screen readers */
.visually-hidden {
    visibility: hidden;
}
Enter fullscreen mode Exit fullscreen mode

Pro Tips I Learned

1. Smooth Transitions 

.fade-element {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fade-element.hidden {
    opacity: 0;
    visibility: hidden;
}
Enter fullscreen mode Exit fullscreen mode

2. Responsive Display Utilities 

/* Hide on mobile */
@media (max-width: 767px) {
    .hidden-mobile {
        display: none;
    }
}

/* Hide on desktop */
@media (min-width: 768px) {
    .hidden-desktop {
        display: none;
    }
}
Enter fullscreen mode Exit fullscreen mode

3. Debugging Layout Issues 

/* Temporary border to see element boundaries */
* {
    border: 1px solid red;
}
Enter fullscreen mode Exit fullscreen mode

What's Next?

Tomorrow I'm diving into CSS positioning (static, relative, absolute, fixed) to learn how elements can break out of the normal document flow. Understanding display properties will be crucial for positioning!

Display and visibility were game-changers for my layouts! What's your go-to method for showing/hiding elements? Share your tips below! 🚀

Tags

#css #webdev #learning #frontend #display #visibility #100daysofcode

Top comments (0)