html - 为什么 ul 元素的 padding area 和 children 在 CSS 中是分开的？

Question

我正在按照本教程 ( https://www.youtube.com/watch?v=2wCpkOk2uCg ) 制作一个待办事项应用程序。我应该使用填充将待办任务和已完成任务之间的区域分开。我希望 #completed 的填充区域随着 #completed 的 child 移动，但它总是在 .container 的顶部。如何合并填充和元素？ The location of the padding image

就我一直在搜索 css 定位而言，我认为设置 #todo 和 #completed 相对位置是正确的。但它不起作用。我也试过像教程一样设置 #complete 的位置。它也不起作用。

这是.container的html代码，包含#todo和#completed区域。

<div class="container">
    <!-- Uncompleted tasks -->
    <ul class ="todo" id="todo">

    </ul>

    <!-- Completed tasks -->
    <ul class="todo" id="completed"></ul>
</div>

这是我设置位置的css代码。我没有设置 .container 的位置。(我修改了背景颜色和不透明度以验证填充区域。)

ul.todo#todo {
    position:relative;
}

ul.todo#completed:not(:empty) {
    position:relative;
    padding:60px 0 0 0;
    background:#000;
    opacity:0.3;
}

ul.todo#completed:not(:empty):before {
    content:'';
    width:150px;
    height:1px;
    background:#fff;
    position:absolute;
    top:30px;
    left:50%;
    margin:0 0 0 -75px;
}

这是完整的CSS代码(https://github.com/JaeraeKim/todoList/blob/master/app/resources/css/style.css)

感谢阅读。

Answer 1

如果您试图在这些元素之间添加空间，您应该使用 margin 而不是 padding。因此 #todo 上的 margin-bottom 或 #completed 上的 margin-bottom 应该将它们分开。

填充使元素保持相同大小，但将其“缩小”到自己的空间，而边距在其周围创建空间，保留为空白。