Skip to content

Instantly share code, notes, and snippets.

@wchargin

wchargin/1cap.html

Created June 26, 2025 02:23
Show Gist options
  • Save wchargin/16d3a46a1ccb7209011b99ec356d2210 to your computer and use it in GitHub Desktop.
Save wchargin/16d3a46a1ccb7209011b99ec356d2210 to your computer and use it in GitHub Desktop.
Download ZIP
demo of using "font-size: 1cap" to align icons properly
Raw
1cap.html
<!doctype html>
<style>
img {
height: 1em;
}
.cap {
font-size: 1cap;
}
table {
border-spacing: 0;
}
td,
th {
text-align: center;
padding: 0 1em;
background: rgb(from var(--cell-color) r g b / 50%);
height: 2em;
}
td {
font-size: 24px;
}
.spacer {
display: inline-block;
vertical-align: middle;
height: 1.75em;
}
td:first-child,
th:first-child {
--cell-color: rebeccapurple;
}
td:last-child,
th:last-child {
--cell-color: yellow;
}
</style>
<table colspacing="8">
<thead>
<tr>
<th><tt>height: 1em;</tt></th>
<th><tt>height: 1em; font-size: 1cap;</tt></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="spacer"></span
><span>Hello <img src="grid.svg" /> grid</span>
</td>
<td>
<span class="spacer"></span
><span>Hello <img src="grid.svg" class="cap" /> grid</span>
</td>
</tr>
<tr>
<td>
<span class="spacer"></span
><span>Hello <img src="flag.svg" /> flag</span>
</td>
<td>
<span class="spacer"></span
><span>Hello <img src="flag.svg" class="cap" /> flag</span>
</td>
</tr>
<tr>
<td>
<span class="spacer"></span
><span>Hello <img src="solar.svg" /> solar</span>
</td>
<td>
<span class="spacer"></span
><span>Hello <img src="solar.svg" class="cap" /> solar</span>
</td>
</tr>
</tbody>
</table>
@wchargin
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment