<分区>
html - 为什么缺少边距顶部和底部？
.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:
那么 margin-top 和 margin-bottom 在哪里呢？
最佳答案
上边距和下边距不影响内联元素，因为内联元素随页面内容一起流动。您可以在内联元素上设置左右边距/填充，但不能设置顶部或底部，因为这会扰乱内容流。您可以在 block 上设置边距(或内联 block ，但只有在设置垂直对齐右对齐时它才会看起来正确)，因为 block 级元素会扰乱内容流。
这是来自 CSS2 specification on inline formatting of elements :
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.
关于html - 为什么缺少边距顶部和底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42572056/