remという単位はルートのフォントサイズを基準にしており、直前の親の影響などを受けないサイズを指定することができます。
マージン・パディングなどの余白にもこの単位が採用されています。
html{
font-size:16px;
}
h1{
font-size:2rem; // 32px
}
p{
font-size:1rem; // 16px
}
html{
font-size: 16px;
}
p{
font-size: 1rem; /* 1rem = 16px */
}
h1 {
font-size: 1.875rem; /* 30px / 16px = 1.875rem */
}