为何Todo应用中部分hr标签内部存在间隙，部分却无此现象？

嘿，这个问题其实是HTML空白字符、浮动元素和浏览器默认样式共同作用的结果，我给你一步步拆解：

核心原因 #

1. 空白字符的影响
   你静态HTML里的Todo项中，<button>和<hr>之间存在空白字符（换行+空格），但动态生成的Todo项里，这两个元素是紧挨着写的（没有任何空格或换行）。浏览器会把HTML中的空白字符（空格、换行、制表符等）解析成一个单独的空格字符，这个字符属于inline元素，会占据一行的高度（由你设置的li.td的font-size:20pt决定）。

2. 浮动元素的文档流脱离
   因为<button>设置了float:right，它脱离了正常文档流，那个空白字符会作为inline内容留在文档流里，它的行高就会在按钮和hr之间形成一个可见的间隙。而动态生成的项没有这个空白字符，自然就不会出现额外的间隙。

3. 浏览器默认margin的叠加
   浏览器默认给<hr>元素设置了margin: 1em 0，这个默认margin会和周围元素的间距叠加。静态项里因为有空白字符的行高，加上hr的margin-top，间隙会更明显；动态项里没有空白字符，hr的margin-top会和父元素的padding发生折叠，所以间隙几乎看不到。

解决方法 #

你可以任选一种方式来统一所有Todo项的显示效果：

• 统一HTML结构：把静态Todo项里的<button>和<hr>紧挨着写，去掉中间的空白：

  <li class='td'> Code a Todo App <button class='td-btn'>Dismiss</button><hr/> </li>
  

• 清除hr的默认margin：在CSS里覆盖浏览器的默认样式，给hr设置margin: 0：

  hr {
    border: 7px solid #9E9D24;
    padding: 0;
    margin: 0; /* 新增这行清除默认边距 */
  }
  

• 添加 clearfix 清除浮动影响：给.td元素添加伪元素，确保浮动元素不会干扰后续块级元素的布局：

  .td::after {
    content: "";
    display: table;
    clear: both;
  }
  

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