CSS保证金问题

我有一个问题与我的CSS在哪里，如果我使用margin: 0而不是margin-top: 0，对于header p，header { margin: 0 0 20px; }将一样好。应该是这样吗？如果我看到萤火虫发生了什么，它的margin-bottom的header崩溃进入下一个兄弟，section。CSS保证金问题

alt text

HTML

<header> 
    <h1>ToDo List</h1> 
    <p>HTML5 Offline Capable Web Application</p> 
</header>

CSS

header { font: 24px/1em Notethis; color: #666; margin: 0 0 20px; } 
header h1 { font: 60px/1.4em Hetilica; margin: 0; } 
header p { margin-top: 0; }

来源

2010-05-30 Jiew Meng

优秀提问。布拉沃。 – GlenCrawford 2010-05-30 13:22:34

出于好奇，这个问题是如何“脱离主题”？（我问，因为我对好评的原因感到好奇）。诚然，这只是CSS而不是编程，但它并不是独一无二的，而社区似乎总体上可以接受这一点，根据SO上的CSS问题数量来判断。 – 2010-05-30 16:01:41

我认为这里的问题是您的header元素实际上并没有渲染任何margin。您看到的空间实际上是应用于header p的默认margin的结果。

我之所以说这是一个许多浏览器不会自动处理header标签作为一个块级元素，除非明确地这样定义：

header { display: block; }

在你的CSS我可以将这个声明header后成功应用header p { margin: 0 }并保留header本身中指定的保证金。删除此语句将恢复您所看到的行为。

来源

2010-05-30 16:33:55

默认情况下，萤火虫只能说明你的故事的一部分。

要看到，当你改变margin-top: 0;为margin: 0 0 0 0;，请点击右侧的箭头的样式选项卡（上面的“header p”你的快照）到底发生了什么，并选择“显示默认的CSS属性”或某事像那和你”会向下看到html.css已经STYLES p为：

p { 
    display: block; 
    margin: 1em 0; 
}

当心，不要修改系统的样式或你将不得不重新启动Firefox，重新打开选项卡将是不够的。

BTW这1em保证金就是你的HTML看到，没有任何风格（菜单显示/网页样式/否Firefox或者网页开发工具的CSS菜单样式）：你的段落有一些垂直边距。

所以基本上你删除了一个1em底部边距。

来源

2010-05-30 16:28:46 FelipeAls

哦，谢谢！但是qn将会是为什么没有'header {margin：0 0 20px; }“做任何事情？哦@matt回答了这个问题...... “许多浏览器不会自动将'header'标记视为块级元素，除非明确定义” – 2010-05-31 12:58:23

CSS保证金问题

回答

相关问题