代码之家 › 专栏 › 技术社区 › Ibrahim Azhar Armar

为什么div继承sub div的属性?

css html

Ibrahim Azhar Armar · 技术社区 · 15 年前

在我网页的页眉部分,设计类似于logo和navigation div应该重叠一个repeat-x图像(即bg页眉)。

这是我用过的html

<div id="header">
    <div id="header-bar">
        <p>kljslakdjlaskjdkljasdlkjasdlkjaskldjasjd</p>
    </div>
</div>

这是css

#header {
    min-width: 1040px;
    height: 111px;
    position: relative;
}
#header-bar {
    margin-top:50px;
    height:53px;
}

现在,当在标题栏中,如果我给margin top:50px,那么标题div将位置从顶部移到50px。我想达到

header div用于定义头内容的高度。

我想在header div中包装header bar,在header div中包装的元素或div应该在header div中有50px的边距。

例如,标题栏的页眉div顶部的边距应为50px。

希望我没有把你弄糊涂。

我哪里做错了?

我想用repeat-x属性移动图像。在标题bg div中

5 回复 | 直到 15 年前

jimplode 15 年前

在页眉div上使用padding而不是margin。

#header {
    min-width: 1040px;
    height: 111px;
    padding:50px 0px 0px 0px;
}
#header-bar {
    height:53px;
}

Ben James 15 年前

边距不影响元素相对于其父元素的位置。

#header

#header {
    min-width: 1040px;
    height: 61px;
    position: relative;
    padding-top: 50px;
}
#header-bar {
    height:53px;
}

Justus Romijn Tim T 15 年前

Ryan Kinal 15 年前

margin-collapse . 实际上,相邻的边距将一起收拢,并且只显示较大的边距,即与0的绝对距离较大的边距。由于页眉边距(0px)与页眉栏边距(50px)相邻,因此显示的是50px边距,它会影响两个元素。

如果你在上面加上1倍的填充物 #header ,您将获得所需的效果:

#header {
    min-width: 1040px;
    height: 111px;
    position: relative;
    padding-top: 1px;
}

Shikiryu DhruvJoshi 15 年前

你的回答是这样的吗 link

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前