フォントサイズを指定する場合、「px」などの絶対指定と、「%」などの相対指定の2種類の単位があります。
関連ページ → ［ブラウザ上で文字の見た目を確認する・その２］
このページで確認する「em」、「rem」は、相対指定の一種で、ともに文字サイズの高さを1とする単位です。
「em」は、その指定要素がある位置での文字サイズを基準にします。仮にルート要素であるhtmlタグで文字サイズを15pxと指定（ html {font-size:15px} ）していたとしても、そのemがある位置の親要素のfont-size指定が18pxならば、1emのサイズは18pxになります。

一方、「rem」は、ルート要素で指定した文字サイズを基準にします。htmlの入れ子の中にあっても親要素の指定に影響されません。

サンプル１（emを使った場合）

サンプル１は、左右の親要素内に内包するテキストを含めて全く同じp要素が入っています。文字サイズは、ルート要素で指定した15pxのままで、右側の親要素のみに font-size:18px を指定しています。その結果、
左側：1emは15px　font-sizeが15px（1em）paddingが7.5px（0.5em）
右側：1emは18px　font-sizeが18px（1em）paddingが9px（0.5em）になっています。

サンプル１のhtmlソース

  <div class="box">
  	<div class="parent-l"><p class="sample">font-size:1em; padding:0.5em</p></div>
  	<div class="parent-r"><p class="sample">font-size:1em; padding:0.5em</p></div>
  </div>

サンプル１のCSSソース

html {
	font-size: 15px;
	}
.parent-l,.parent-r {
	display: inline-block;
	width: 45%;
	margin: 0 0 0 15px;
	padding: 5px;
	}
.parent-r {
	font-size: 18px;
	}
p.sample {
	text-align: center;
	background: #bef;
	color: #000;
	border: 1px solid #ccc;
	font-size: 1em;  /*-- emを使用 --*/
	padding: 0.5em;  /*-- emを使用 --*/
	}

 

サンプル２（remを使った場合）

サンプル２は、サンプル１と同じ状態のものを使い、p要素のみclass名を「sample2」として、CSSでemをremに置き換えています。右側の親要素のみに  font-size:18px を指定していますが、結果は同じになります。
左側：1remは15px　font-sizeが15px（1rem）paddingが7.5px（0.5rem）
右側：1remは15px　font-sizeが15px（1rem）paddingが7.5px（0.5rem）

サンプル２のhtmlソース

  <div class="box">
  	<div class="parent-l"><p class="sample2">font-size:1rem; padding:0.5rem</p></div>
  	<div class="parent-r"><p class="sample2">font-size:1rem; padding:0.5rem</p></div>
  </div> 

サンプル２のCSSソース（変更部分のみ）

p.sample2 {
	text-align: center;
	background: #bef;
	color:#000;
	border: 1px solid #ccc;
	font-size: 1rem;  /*-- remを使用 --*/
	padding: 0.5rem;  /*-- remを使用 --*/
	}

 

サンプル３（左右のpaddingのみをemとremに）

左右の親要素をまったく同じにして、左右のp要素の文字サイズをともに絶対指定の font-size:18px 、paddingのみ左を「em」、右を「rem」の単位にしています。その結果、左側のpaddingは、font-sizeの18pxの半分の9pxに、右側のpaddingは、ルート要素指定の15pxの半分の7.5pxになります。
左側：font-sizeが18px　1emは18px　paddingが9px（0.5em）
右側：font-sizeが18px　1remは15px　paddingが7.5px（0.5rem）

サンプル３のhtmlソース

 <div class="box">
  	<div class="parent"><p>font-size:18px; padding:0.5em</p></div>
  	<div class="parent"><p class="rem">font-size:18px; padding:0.5rem</p></div>
 </div> 

サンプル３のCSSソース

.parent {
	display: inline-block;
	width: 45%;
	margin: 0 0 0 15px;
	padding: 5px;
	}
.parent p {
	text-align: center;
	background: #bef;
	color:#000;
	border: 1px solid #ccc;
	font-size: 18px;
	padding: 0.5em;  /*-- p要素左側emを使用 --*/
	}
.parent p.rem {
	padding: 0.5rem;  /*-- p要素右側remを使用 --*/
	}