div間のスペースが等しくない

Question

margin-bottom：5pxのdivがいくつかあります。それが私にとって論理ではないのは、div間の間隔が等しくないということです。 divにテキストを挿入すると、スペースが減少します。テキストがなければ、スペースが増えます。ここで

それはこのようになりますexample from code pen

です：.divNoteこれに

.divNote{ 
    position: relative; 
    display: inline-block; 
    left: 20%; 
    width: 60%; 
    min-height: 60px; 
    margin-bottom: 5px; 
    background-color: #FAC28A; 
    font-family: verdana, sans-serif; 
    font-size: 15px; 
    color: #003399; 
    padding-left: 5px; 
    padding-top: 1px; 
    padding-bottom: 20px; 
    box-shadow: 3px 3px 3px gray;  
    box-sizing: border-box; 
} 

Answer 1

設定float:left：

すべてのdivの位置があります。相対的なマージン下：5pxのを働くでしょう。

@border: 1px; 
 

 
.divMain{ 
 
    position: absolute; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 

 
.divNote{ 
 
    position: relative; 
 
    display: inline-block; 
 
    left: 20%; 
 
    width: 60%; 
 
    min-height: 60px; 
 
    margin-bottom: 5px; 
 
    background-color: #FAC28A; 
 
    font-family: verdana, sans-serif; 
 
    font-size: 15px; 
 
    color: #003399; 
 
    padding-left: 5px; 
 
    padding-top: 1px; 
 
    padding-bottom: 20px; 
 
    box-shadow: 3px 3px 3px gray;  
 
    box-sizing: border-box; 
 
    float:left; 
 
} 
 

 
.divNoteDatum{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    font-weight: bold;  
 
    bottom: 0; 
 
    right: 5px; 
 
    color: #003399; 
 
} 
 

 
.divUpper{ 
 
    position: relative; 
 
    height: 20%; 
 
}

<div id="divMain" class="divMain"> 
 

 
    <div class="divUpper"></div> 
 

 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 

 

 
</div> 
 
<!-- divMain -->

Answer 2

インラインブロックdivNote要素のvertical-align:topを加えます。インラインブロック要素の内容のオーバーフローによって、この問題が発生します。それは動作します...しかし、どのように来るの垂直整列

@border: 1px; 
 

 
.divMain{ 
 
    position: absolute; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 

 
.divNote{ 
 
    position: relative; 
 
    display: inline-block; 
 
    float: left; 
 
    left: 20%; 
 
    width: 60%; 
 
    min-height: 60px; 
 
    margin-bottom: 5px; 
 
    background-color: #FAC28A; 
 
    font-family: verdana, sans-serif; 
 
    font-size: 15px; 
 
    color: #003399; 
 
    padding-left: 5px; 
 
    padding-top: 1px; 
 
    padding-bottom: 20px; 
 
    box-shadow: 3px 3px 3px gray;  
 
    box-sizing: border-box; 
 
    vertical-align: top; 
 
} 
 

 
.divNoteDatum{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    font-weight: bold;  
 
    bottom: 0; 
 
    right: 5px; 
 
    color: #003399; 
 
} 
 

 
.divUpper{ 
 
    position: relative; 
 
    height: 20%; 
 
}

<div id="divMain" class="divMain"> 
 

 
    <div class="divUpper"></div> 
 

 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    test<br/>test<br/>test 
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 
    
 
    <div id="divNote" class="divNote"> 
 
    
 
    <div id="divNoteDatum" class="divNoteDatum">12.08.2016 11:08</div> 
 
    </div> 
 

 

 
</div> 
 
<!-- divMain -->