Normalize / Reset

Baseline appearance of native HTML elements after Beautify normalize is applied.

Notes

Document structure

box-sizing

width: 200px + padding 20 + border 10 — total still 200px (border-box)

border-box makes width/height include padding and border.

body margin

Default body margin is removed — no white edge around the page.

Typography

Headings (h1–h6)

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

System font stack

The quick brown fox jumps over the lazy dog

System UI font with CJK fallback.

b / strong (bold)

b tag bold

strong tag bold

Both use font-weight: bolder.

i (italic)

Italic text

em (Auto-adapted for languages without italic tradition)

Emphasized text

EM强调文本

u / ins / del / s

Underlined, Inserted, Deleted, Strikethrough

mark

This is highlighted text using the mark tag.

Monospace (code, kbd, samp, pre)

Inline code: npm install

Keyboard: Ctrl+C

Sample: output text

function hello() {
  console.log("monospace");
}
      

function hello() {
  console.log("monospace");
}

small

Normal text

Small text (80%)

sub / sup

H2O is water

E = mc2

Sub and sup do not affect line height.

abbr

CSS stands for Cascading Style Sheets.

cite (uses dashed underline for non-italic languages)

The Elements of Style — a citation example.

《论语》 — 子曰：学而时习之，不亦说乎。

dfn (displays as bold for non-italic languages)

HTML is the standard markup language for web documents.

HTML 是基本标签.

time

address

Contact: user@example.com
123 Main Street, City

ruby

中Zhong国Guo

blockquote

This is a blockquote. It inherits the base font size and line height.

Lists

Unordered list (ul)

Ordered list (ol)

  1. First step
    1. Sub-step 1
    2. Sub-step 2
  2. Second step
  3. Third step

Description list (dl)

HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Table

# City Population
1 Beijing 21.8M
2 Shanghai 24.7M
3 Shenzhen 17.6M

Forms

Button

Input types

text:
search:
number:
password:
email:
url:
tel:
color:
file:

Input date / time

date:
time:
datetime-local:
month:
week:

Input range

Checkbox / Radio

Select

Datalist

Textarea

Output

+ = 50

Fieldset / Legend

Contact Info
Phone:
Email:

Progress

Download progress: 70%

Meter

Disk usage: 45%

Memory: 80%

Label with input

Interactive elements

details / summary

Click to expand

This content is hidden by default.

dialog

Native <dialog> element. Open with anchor :target or JS.

Open dialog

Native <dialog> displayed with normalize baseline styling.

Close

Media elements

img

Images are max-width: 100% and height: auto.

hr

Horizontal rule rendered as a 1px solid line with border color.