为什么上边距会压低我的 Div，我该如何解决？

Susan Sarandon

发布： 2024-12-18 17:29:15

原创

889 人浏览过

Why Does a Top Margin Push My Div Down, and How Can I Fix It?

Margin-Top 将 Div 向下推：解决方案揭晓

将上边距应用于页面上的第一个可见元素可能会导致整个包含div 向下移动。这在标题部分尤其明显。要解决此问题，请将以下 CSS 属性应用于父 div：

overflow: auto;

登录后复制

此属性允许父 div 自动适应子元素上边距导致的高度增加。

这是一个包含解决方案的修改后的示例代码片段：

div#header{
    width: 100%;
    background-color: #eee;
    position: relative;
    overflow: auto;
}

div#header h1{
    text-align: center;
    width: 375px;
    height: 50px;
    margin: 50px auto;
    font-size: 220%;
    background: url('../../images/name_logo.png') no-repeat;
}

登录后复制

通过添加溢出：auto属性，#header div将自动扩展以适应高度h1 元素，防止其将整个标题向下推。

以上是为什么上边距会压低我的 Div，我该如何解决？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

上一篇：如何创建一个固定在滚动条上的浮动 Div？下一篇：为什么空的内联块跨度在其容器内垂直不对齐？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章