CSS中的em是一个相对于父元素字体大小的单位，用于设置元素的尺寸、内边距、边框和外边距等。

.box{
font-size: 16px; /* 父元素字体大小 */
width: 10em; /* 宽度为16*10=160px */
padding: 0.5em 1em; /* 上下内边距为16*0.5=8px，左右内边距为16*1=16px */
border: 1px solid black; /* 边框宽度为1px */
margin: 2em; /* 上下外边距为16*2=32px，左右外边距也为32px */
}

在计算em时，需要关注父元素的字体大小。如果父元素未设置字体大小，则em会继承祖先元素的字体大小，直至找到已设置字体大小的祖先元素为止。

例如，如果有如下HTML结构：

<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>

CSS代码如下：

.grandfather{
font-size: 18px;
}
.father{
font-size: 16px;
}
.son{
width: 10em; /* 宽度为16*10=160px */
}

那么.son元素的em将继承.father元素的字体大小，即16px。如果.father元素未设置字体大小，那么em将继承.grandfather元素的字体大小18px。