CSS Inline-block
Combine the best of inline and block elements
🧩 What is Inline-block?
The inline-block display value combines features of both inline and block elements. Elements flow inline but can have width, height, and vertical margins like block elements.
/* Basic inline-block example */
.inline-block-element {
display: inline-block;
width: 100px;
height: 60px;
background-color: lightcoral;
margin: 10px;
padding: 10px;
}
Output:
Display Types Comparison
Inline
Flows with text, no width/height
display: inline;Block
Full width, stacks vertically
display: block;Inline-block
Flows inline with block properties
display: inline-block;Best of Both
Width, height + inline flow
width: 100px; height: 50px;🔹 Display Types Side by Side
Comparing inline, block, and inline-block display values reveals fundamental layout behaviors in CSS. Inline elements flow within text, ignore width/height, and allow side-by-side placement but cause unwanted gaps. Block elements start on new lines, occupy full available width, and respect box-model properties. Inline-block blends both: elements sit inline but accept dimensions, padding, and margins. This hybrid is ideal for custom-styled buttons, navigation items, and grid-based components without floating or flexbox. Understanding these types helps choose the right display for semantic, accessible, and responsive layouts.
.demo-box {
background-color: #4ecdc4;
color: white;
padding: 10px;
margin: 5px;
text-align: center;
}
.inline-demo { display: inline; }
.block-demo { display: block; }
.inline-block-demo {
display: inline-block;
width: 120px;
height: 50px;
}Output:
Inline:
Inline 1 Inline 2 Inline 3Block:
Inline-block:
🔹 Navigation Menu Example
Creating horizontal navigation menus with inline-block involves resetting list styles, setting display properties, and managing whitespace. Apply display: inline-block to <li> items, remove default bullets with list-style: none, and use text-align: center on the container for alignment. Control spacing with padding or margin instead of relying on natural gaps between inline-block elements. Add :hover and :focus states for interactivity and accessibility. This method is simpler than floats and more backward-compatible than flexbox, making it suitable for basic responsive menus that degrade gracefully in older browsers.
.nav-menu {
background-color: #333;
padding: 0;
margin: 0;
text-align: center;
}
.nav-item {
display: inline-block;
background-color: #555;
color: white;
padding: 15px 20px;
margin: 0;
text-decoration: none;
border-right: 1px solid #666;
}
.nav-item:hover {
background-color: #777;
}
.nav-item:last-child {
border-right: none;
}🔹 Card Grid Layout
A responsive card grid layout displays content in a flexible, visually consistent manner that adapts to available screen space. Using CSS Grid with grid‑template‑columns: repeat(auto‑fill, minmax(300px, 1fr)), cards automatically reflow to fill the container, creating columns as width permits. This approach maintains uniform card sizing and gutters while avoiding media‑query overload. Enhance with hover effects, subtle shadows, and smooth transitions for interactivity. Card grids are perfect for portfolios, product listings, blog feeds, or team member showcases. They improve content discoverability, user engagement, and overall site aesthetics on any device.
.card-container {
text-align: center;
font-size: 0; /* Remove whitespace between cards */
}
.card {
display: inline-block;
width: 200px;
margin: 10px;
padding: 20px;
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
vertical-align: top;
font-size: 14px; /* Reset font size */
}
.card h3 {
margin-top: 0;
color: #333;
}
.card p {
color: #666;
line-height: 1.5;
}Output:
Card 1
This is the first card with some content.
Card 2
This is the second card with different content that might be longer.
🔹 Vertical Alignment
Controlling vertical alignment in inline-block layouts uses the vertical-align property, which aligns elements relative to their line box or container. Common values include top, middle, bottom, and baseline (default). For precise control, pair with line-height on parent containers. In multi-line text or icon-and-text combinations, vertical-align: middle often centers elements visually. Note that alignment can break if parent height isn’t explicitly set or if conflicting display values exist. Testing across browsers is essential, as rendering differences may occur, especially with images or SVG icons.
.alignment-demo {
background-color: #f0f8ff;
padding: 20px;
line-height: 100px; /* Set line height for reference */
}
.box {
display: inline-block;
width: 80px;
height: 60px;
background-color: #ff6b6b;
margin: 0 10px;
color: white;
text-align: center;
line-height: 60px;
}
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
.baseline { vertical-align: baseline; }