Html 为什么缺少上下页边距？

分隔符{
边框：1px实心#000000；
利润率：10px；
}

分离器
你好
世界
Span是一个内联元素，因此边距在垂直方向（顶部和底部）没有影响。将跨距括在DIV内以使用水平边距

.margin {
  margin: 10px 0 10px 0;
}
.separator {
  border: 1px solid #000000;
  margin: 10px;
}

<div class="margin">
   <span>hello</span>
   <span class="separator"></span>
   <span>world</span>
</div>

.margin{
利润率：10px 0 10px 0；
}
.分离器{
边框：1px实心#000000；
利润率：10px；
}
你好
世界
Span是一个内联元素，因此边距在垂直方向（顶部和底部）没有影响。将跨距括在DIV内以使用水平边距

.margin {
  margin: 10px 0 10px 0;
}
.separator {
  border: 1px solid #000000;
  margin: 10px;
}

<div class="margin">
   <span>hello</span>
   <span class="separator"></span>
   <span>world</span>
</div>

.margin{
利润率：10px 0 10px 0；
}
.分离器{
边框：1px实心#000000；
利润率：10px；
}
你好
世界
上下页边距不影响内联元素，因为内联元素随页面上的内容流动。可以在内联元素上设置左右边距/填充，但不能设置顶部或底部，因为这样会中断内容流。可以在块（或内联块）上设置页边距，但只有在将垂直对齐设置为右侧时，页边距才会正确显示，因为块级元素会中断内容流

这是来自：

在内联格式上下文中，框从包含块的顶部开始，一个接一个地水平排列。在这些框之间考虑水平边距、边框和填充

上下页边距不影响内联元素，因为内联元素随页面上的内容流动。可以在内联元素上设置左右边距/填充，但不能设置顶部或底部，因为这样会中断内容流。可以在块（或内联块）上设置页边距，但只有在将垂直对齐设置为右侧时，页边距才会正确显示，因为块级元素会中断内容流

这是来自：

在内联格式上下文中，框从包含块的顶部开始，一个接一个地水平排列。在这些框之间考虑水平边距、边框和填充

标记是使用
内联
显示属性的默认标记，因此它们不考虑垂直边距，只考虑水平边距。请参见下面的参考

CSS2规范的第节规定：

内联此值导致元素生成一个或多个内联
盒。在CSS2规范（第9.4.2节）中，我们得到
告诉我们内联元素只考虑水平边距

块级元素同时考虑水平和垂直边距，而内联级元素只考虑水平边距。

因此，如果您使用内联块更改属性，那么它将尊重这一点，但是您需要进行一些进一步的样式设置，以实现垂直条。
标记是使用
内联
显示属性的默认标记，因此它们不尊重垂直边距，只尊重水平边距。
<。，请参阅下面的参考资料

CSS2规范的第节规定：

内联此值导致元素生成一个或多个内联
盒。在CSS2规范（第9.4.2节）中，我们得到
告诉我们内联元素只考虑水平边距

块级元素同时考虑水平和垂直边距，而内联级元素只考虑水平边距。

因此，如果您使用inline block更改属性，那么它将尊重这一点，但是您需要进行一些进一步的样式设置，以实现垂直条。
试试这个


body{padding:0；margin:0；}
.分离器{
边框：1px实心#000000；
利润率：10px；
显示：内联块；高度：20px；垂直对齐：中间
}

分离器
你好
世界
试试这个


body{padding:0；margin:0；}
.分离器{
边框：1px实心#000000；
利润率：10px；
显示：内联块；高度：20px；垂直对齐：中间
}

分离器
你好
世界