html - Top Margin 也会拉下父级

标签 html css

<!doctype html>
<html>
<head>
    <title></title>
</head>
<body>
    <nav><ul class='container'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Categories</a></li>
        <li><a href='#'>How to Play</a></li>
        <li><a href='#'>Contact</a></li>
    </ul></nav>
    <article id="showcase">
        <h1>Hello</h1>
    </article>
</body>
</html>​

http://jsfiddle.net/hjYzs/

怎么了? <h1>的 margin 似乎在拉动其父级 article也下来了。

最佳答案

嘿,现在给你的 css 中的 #showcase overflow:hidden

#showcase{
overflow:hidden;
}

Live demo

这是折叠边距 和 more info

关于html - Top Margin 也会拉下父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11843532/

相关文章:

javascript - 循环遍历所有子元素

html - <ul>> <li> 和 <ul> <li> 之间的 css 样式差异

html - 悬停时更改 SVG 的描边和填充颜色

css - 菜单链接过渡 CSS

javascript - 如何在 Bootstrap 中对表格应用轮播效果?

javascript - 如何禁用基于数据库值的条件选择

javascript - 如果至少一个输入有值或者选择更改了默认值,则启用/禁用切换按钮

iPhone 的 CSS 媒体查询

javascript - 为什么我的 Bootstrap 弹出窗口不起作用?

css - 如何使静态 ionic 列表在 ionic 中可滚动?