gpt4 book ai didi

html - 为什么 div margin 不计算直接父级

转载 作者:行者123 更新时间:2023-12-04 03:37:11 26 4
gpt4 key购买 nike

<分区>

我正在练习基本的 CSS。我希望网页的页眉布局如下所示: wide top margin .

我的 html:

    <div class="header">
.
.
.
</div>
<div class="page">
<div class="page-inside">
<div class="row-apps">
<div class="row-apps-item">
<img src="02.jpg" class="row-apps-img">
Kurikulum
</div>
<div class="row-apps-item">
<img src="03.jpg" class="row-apps-img">
Status Mahasiswa
.
.
.
</div>
</div>
</div>
</div>

还有 CSS:

.page {
height: 1000px;
padding: 0;
background-color:rgb(31, 31, 31);
}

.page-inside {
width: 1000px;
margin: 30px auto;
}

.row-apps {
padding: 10px;
overflow: hidden;
}

.row-apps-item {
color: rgb(57, 57, 207);
width: 16.66%;
float: left;
padding: 5px 10px;
}

我打算使 .page-inside 与内容主容器 .page 的距离为 30px(保留黑色背景)。所以我添加了那个边距,但是我从 .page-inside.header 得到了 30px。它看起来像这样:broken top margin .我已经(通过 Chrome 开发工具)确保空白是由于 .page-inside 而不是 header.page

我知道我可以向 .page-inside.row-items 添加填充,但我相信添加边距也应该有效。我的理解有什么问题吗?

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com