在块中对齐项目

Question

<div class="body">
  Some text
<div class="bot">some text</div>
</div>

.body{
  padding: 15px;
}

如何仅使用bot类在元素中进行零填充？在不添加其他类的情况下，也许有一些用于这些目的的特定选择器？

Answer 1

您可以通过两种方式实现此目的，一种是像这样将类bot的div从具有类主体的父div中删除

    <div class="body">
        Some text
    </div>

    <div class="bot">some text</div>

或     像这样将.bot类的位置属性设置为绝对div

.bot{
    position: absolute;
}

Answer 2

您可以将此代码添加到样式表文件中

* {
  margin: 0;
  padding: 0
 }

Answer 3

当一个<div>位于另一个<div>内时，它就是该div的“子级”。它将具有这些特征，并且就像padding: 0;填充0大于其父级的空格一样。

这样写CSS可能更容易，以说明这两个元素的性质：

<div class="body">
  Some text
  <div class="bot">some text</div>
</div>

我同意另一个发布者的观点，即有 一种方法可以将元素放置在页面上的绝对位置，但是有可能在您的父元素之外运行。

相反，您似乎希望在网页的一部分中放置第一个未使用的内容。这意味着您可能确实希望将两者分开。这意味着您可能不想将<div class="bot">放在<div class="body">内。相反，您要为父级内部的第二个<div>较低的（或较高的）空间。也许是这样吗？

<div class="body">
    Some text
</div>

<div class="bot">some text</div>

---

/* removes the padding from the bottom, making space for some of the div above*/
.body {
  padding: 15px 15px 0 15px;
}

或者这个：

<div class="body">
    Some text
</div>

<div class="bot">some text</div>

---

.body5 {
    padding: 15px;
}

/*puts a negative margin on lower div, to make up the space*/
.bot5 {
    margin-top: -15px;
    background: green;
}

如果您想使用它，我会将所有这些附加到CodePen上：https://codepen.io/benjithaimmortal/pen/xMQNeJ