CSS Inline-block
display: inline-block is the middle ground between inline and block. The element flows inline with text, but you can set its width, height, and vertical padding.
How it compares
| inline | inline-block | block | |
|---|---|---|---|
| New line before/after? | No | No | Yes |
Respects width / height? | No | Yes | Yes |
| Vertical margin/padding pushes neighbours? | No | Yes | Yes |
| Typical for… | span, a | Buttons, nav links, badges | div, section |
Three pill buttons in a row
inline-block.Note: Inline-block elements inherit a small gap from the whitespace between them in HTML. Either remove the whitespace, use comments, or move to Flexbox to control spacing precisely.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Inline-block</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Lay these tags out side-by-side while still being able to set width.
.tag { display:
-block; width: 80px; }
The other half of the hyphenated value.
Discussion
Loading…