为什么缺少顶部和底部的保证金? [英] Why margin top and bottom is missing?
问题描述
.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> 没有上边距和下边距?以下两张图片可以清楚地描述我的问题.
I wonder why <span class="separator"></span> do not have margin-top and margin-bottom? The following two pictures can clearly describe my problems.
您可以看到分隔符的边框是从上到下的:
You can see separator's border is from top to bottom:
但是控制台显示margin-top和margin-bottom均为10px:
But console shows that margin-top and margin-bottom are both 10px:
那么边距顶部和边距底部在哪里?
So where are the margin-top and margin-bottom?
推荐答案
上下边界不影响嵌入式元素，因为嵌入式元素随页面内容一起流动.您可以在嵌入式元素上设置左右边距/填充，但不能在顶部或底部设置，因为这会破坏内容的流动.您可以在块(或行内块)上设置边距，但只有在您设置垂直对齐右边时，它才会看起来正确)，因为块级元素会干扰内容流.
Top and bottom margins do not affect inline elements because inline elements flow with content on the page. You can set left and right margins/padding on an inline element but not top or bottom because it would disrupt the flow of content. You can set margins on block (or inline-block but it will only look right if you set the vertical align right) because block level elements disrupt the flow of content.
这来自有关元素的内联格式的CSS2规范:
在内联格式设置上下文中，框从一个包含块的顶部开始以一个接一个的水平排列.在这些框之间要注意水平边距，边框和填充.
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.
这篇关于为什么缺少顶部和底部的保证金?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
