em与rem的差异， margin垂直布局与水平布局的差异

最新推荐文章于 2025-03-21 22:22:21 发布

原创最新推荐文章于 2025-03-21 22:22:21 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #margin #em

html/js/css 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了HTML中em和rem两个长度单位的区别，em是相对于当前元素的字体大小，而rem则是相对于根元素html的字体大小。此外，还详细分析了margin在垂直布局与水平布局中的差异，包括相邻div间间距的计算方式，并提供了页面布局的效果说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、HTML长度单位之em与rem

em与rem都是相对长度单位：

em是相对于当前元素的字体大小font-size的长度;

<div style="font-size:12px">
    <div style="font-size:36px;margin:3em">
        此处的margin:3em 具体的长度换算出的结果就是 108px = 36px * 3;
    </div>
</div>

rem是相对于页面根元素html标记的font-size的长度；

<html style="font-size:12px">
    <div style="font-size:36px;margin:2rem">
        此处的margin:2rem 具体的长度换算出的结果就是 24px = 12px * 2;
    </div>
</html>

2、margin垂直布局与水平布局的差异

1）水平相邻的div之间，中间的间隔是左边div的margin-right加上右边div的margin-left;

2）垂直相邻的div之间，上边div的margin-bottom 与下边div的margin-top又分为两种情况；

① 一正一负————求和；

② 同为正或同为负————取绝对值最大的那个；

<html style="font-size:16px;">
  <head>
    <style type="text/css">
    	div{
          min-height:100px;
          width:90%;
          min-width:100px;
          border: 1px solid blue;
        }
    </style>
  </head>
  <body style="font-size:16px;">
    <div style="padding:em;width:90%;">  
      <div style="padding:1em;margin-bottom:20px;font-size:36px">    
        <div style="float:left;margin-right:1em;width:150px;">           
        </div>
        <div style="float:left;margin-left:-1.5em;width:150px;">        
        </div>
      </div>
      <div style="padding:1rem;margin-top:0px;font-size:36px">    
        <div style="float:left;margin-right:1rem;width:150px;">           
        </div>
        <div style="float:left;margin-left:1rem;width:150px;">        
        </div>
      </div>  
    </div>
  </body>
</html>

页面效果图如下：

页面效果图