Last-Child Margin-Bottom无效

Question

基本上我的所有'行'div都有一个底部。有一个margin-bottom：最后一个div为0，但它似乎不起作用。我正在使用HTML和SCSS。

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; }

<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>

Answer 1

首先，在<div>内<a>将瓶子放入水中，我的意思是，在内联元素中使用块级元素是犯罪行为。

您已定义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;
}