Display & Visibility in CSS
From the CSS cheat sheet · Display & Visibility · verified Jul 2026
Display & Visibility
Block, inline, none, visibility, and opacity
css
display: block; /* Full width, new line */
display: inline; /* Flows with text */
display: inline-block; /* Inline but accepts width/height */
display: none; /* Removed from layout */
display: flex; /* Flexbox container */
display: grid; /* Grid container */
visibility: hidden; /* Hidden but takes up space */
opacity: 0; /* Transparent but interactive */💡 display: none removes from layout AND accessibility — use .sr-only to hide visually but keep for screen readers
⚡ object-fit: cover on images is like background-size: cover but for img/video elements
📌 inline elements ignore width, height, and vertical margin — use inline-block if you need those
🟢 See the CSS Flexbox and CSS Grid sheets for complete layout system references
displayvisibilityhide
Continue with CSS
Save the full cheat sheet or work through every related task.