Не равное пространство между divs

Question

У меня есть несколько divs с margin-bottom: 5px. Для меня это не логично, что расстояние между divs не равно. Если я вставляю текст в div, пространство уменьшается. Без текста пространство увеличивается.

Вот example from code pen

Это выглядит следующим образом:

Все дивы имеют положение: относительная и краю дна: 5px:

.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 в .divNote этой будет работать.

@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

Добавить vertical-align:top для элементов divNote рядный блок. Это приводит к переполнению содержимого элементов встроенного блока. Его всегда хорошая практика, чтобы использовать вертикальное выравнивание

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