Question

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

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>Separator</title>
    </head>
    <body>
        <div>
            <span>hello</span>
            <span class="separator"></span>
            <span>world</span>
        </div>
    </body>
</html>

我想知道为什么<span class="separator"></span>没有margin-top和margin-bottom？以下两张图片可以清楚地描述我的问题。

您可以看到分隔符的边框是从上到下：

但是控制台显示margin-top和margin-bottom都是10px：

那么保证金最高点和保证金最低点在哪里？

Answer 1

Span是一个Inline元素，因此边距不会垂直（顶部和底部）。将你的跨度封闭在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>

Answer 2

上边距和下边距不会影响内联元素，因为内联元素会与页面上的内容一起流动。您可以在内联元素上设置左右边距/填充，但不能在顶部或底部设置，因为它会破坏内容流。您可以在块（或内联块）上设置边距，但只有在右侧设置垂直对齐时才会设置边距，因为块级元素会破坏内容流。

这来自CSS2 specification on inline formatting of elements：

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

Answer 3

<span>标签默认使用inline显示属性，因此他们不尊重垂直边距，他们只尊重水平边距。，请参阅下面的参考

CSS2规范的9.2.4部分声明：

内联此值会导致元素生成一个或多个内联框。进一步在CSS2规范（第9.4.2节）中我们得到了告诉内联元素只尊重水平边距

块级元素同时遵循水平和垂直边距，而内联级元素仅尊重水平边距所以，如果你用inline-block改变你的属性，那么它会尊重它，但是你需要做一些进一步的样式才能实现垂直条。

Answer 4

试试这个

body{padding:0;margin:0;}
.separator {
border: 1px solid #000000;
margin: 10px;
display:inline-block;height:20px;vertical-align:middle
}

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>Separator</title>
    </head>
    <body>
        <div>
            <span>hello</span>
            <span class="separator"></span>
            <span>world</span>
        </div>
    </body>
</html>

为什么缺少上边距和下边距？

4 个答案: