html - Last-Child Margin-Bottom 不起作用

Question

<分区>

Answer 1

首先，有<div>里面<a>将瓶子放入水中，我的意思是，在内联元素中包含 block 级元素是一种犯罪行为。

您已经定义了margin .您应该添加以下 CSS:

.main-body a .row.three {
  margin-bottom: -50px; }

或者，您需要这样的东西:

.main-body a:last-child {
  margin-bottom: 0; }

片段

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif; }

.left-sidebar {
  width: 100px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: red; }

.main-body {
  margin-left: 100px;
  background-color: blue;
  padding: 50px; }
.main-body a {
  margin-bottom: 50px; }
.main-body a .row {
  max-width: 100%;
  height: 700px;
  margin-bottom: 50px; }
.main-body a .row.one {
  border: 10px solid red; }
.main-body a .row.two {
  border: 10px solid red; }
.main-body a .row.three {
  border: 10px solid red; }
.main-body a:last-child, .main-body a .row.three {
  margin-bottom: 0; }

<div class="left-sidebar"> 

</div>

<div class="main-body">

  <a href="#"><div class="row one"></div></a>
  <a href="#"><div class="row two"></div></a>
  <a href="#"><div class="row three"></div></a>

</div>

您需要注意您的 .main-body还有一个padding的 50px .如果你需要减少它，你也可以添加这个:

.main-body {
  padding-bottom: 0;
}