Last-Child Margin-Bottom not working

Question

基本上我有一个边缘底部的所有'行'divs。在最后一个div上有一个margin-bottom：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; 
}