Skip to content

Instantly share code, notes, and snippets.

View privatenumber's full-sized avatar

Hiroki Osame privatenumber

View GitHub Profile
@privatenumber
privatenumber / index.html
Created August 3, 2020 01:39
SVG referencing
<!doctype html>
<html>
<body>
<svg style="display: none">
<defs>
<svg id="plus">
<path d="M8 2V14M2 8H14" stroke="black" stroke-width="2"/>
</svg>
<svg id="circle">
@privatenumber
privatenumber / line-height.md
Created September 22, 2020 22:04
CSS line-height

CSS line-height

What's the default value?

line-height has a initial value of normal. What normal means depends on the user agent (browser). Desktop browsers (including Firefox) use a default value of roughly 1.1~1.2, depending on the element's font-family. It's best set a line-height for consistent behavior across browsers.

What unit should be used?

Using a unitless value is the preferred way to set line-height to avoid unexpected results due to inheritance. Unitless values are multipliers against the font-size (eg. a 1.5 line-height on a 16px font-size yields a 24px line-height) and behave the same way a percentage line-height does if there is no inheritence.

How is the unitless value different from a percentage?

They're both multipliers, but behave differently when inherited.

@privatenumber
privatenumber / light-dark-image.svg
Last active December 14, 2022 19:58
Light/dark mode SVG image
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.