如何清除div内部空白及Date文本四周间距并保持响应式？

嘿，这俩问题都是CSS排版里的常见小困扰，我来给你拆解清楚，保证能搞定！

div内部出现空白，大概率是这几个原因导致的，对应解决方法如下：

• 内联元素的换行/空格：如果div里是文本或者<span>这类内联元素，HTML代码里的换行、空格会被浏览器解析成空白字符。解决办法要么把HTML写紧凑（比如<div>Date</div>，别换行拆分），要么给div加font-size: 0;，然后给内部文本单独设置font-size（比如1rem），这样空白就会被“吃掉”。
• div自身的内边距：虽然div默认padding是0，但有时候全局样式会给它加值，所以显式设置padding: 0;更稳妥。
• 子元素的外边距溢出：如果div里有子元素，子元素的margin可能会跑到div外面，或者在内部留空白。给div加overflow: hidden;或者display: flow-root;就能把margin“框”在div里，也可以直接给子元素设margin: 0;。

要实现这个效果，核心是让div的尺寸完全贴合文本，同时去掉所有冗余间距，还要保证响应式：

1. 重置内外边距：先把div的margin和padding都设为0，避免浏览器默认样式搞事：

   .date-box {
     margin: 0;
     padding: 0;
   }
   

2. 压缩文本的行高：文本默认的line-height会比字体实际高度高，导致上下留空白。把line-height设为1（无衬线字体非常适用），就能让文本的上下高度刚好贴合字体：

   .date-box {
     line-height: 1;
   }
   

3. 让div收缩包裹文本：默认div是块级元素，会占满父容器宽度。用width: fit-content;（现代浏览器都支持）可以让div宽度自动适配文本长度，完美贴合；如果要兼容旧浏览器，也可以用display: inline-block;：

   .date-box {
     width: fit-content;
     /* 或者 display: inline-block; */
   }
   

4. 响应式适配：用相对单位（比如rem）设置字体大小，这样当页面缩放、根字体调整时，文本和div尺寸会自动跟着变：

   .date-box {
     font-size: 1rem; /* 1rem等于根元素默认的16px，可根据需求调整 */
   }
   

5. 可选：全局样式重置：给所有元素加个基础重置，能避免很多浏览器默认样式的坑，对响应式也更友好：

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   

   其中box-sizing: border-box;能让元素的padding和border不会额外增加宽度，尺寸计算更精准。

给你个完整的示例代码参考：

<div class="date-box">Date</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.date-box {
  width: fit-content;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
}

内容的提问来源于stack exchange，提问作者Rawan