css margin-bottom funktioniert nicht

Question

Ich möchte ein wenig Spielraum zwischen Produkt div, aber der untere Rand funktioniert nicht. Ich habe auch position: absolute verwendet, aber nichts ändert sich. Bitte helfen Sie mir, weil ich mein Projekt mache.

Output of current code

#mai-contant { 
 
    width: 100%; 
 
    max-width: 840px; 
 
    border: 1px solid; 
 
    float: right; 
 
} 
 

 
.product { 
 
    width: 100%; 
 
    max-width: 271px; 
 
    background-color: black; 
 
    border: 1px solid; 
 
    float: left; 
 
    margin-right: 12px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    margin-bottom: 5px; 
 
}

<div id="mai-contant"> 
 
    <ul> 
 
    <li> 
 
     <div class="product"> 
 
     <img src="../images/004.jpg"> 
 
     </div>    
 
     <div class="product"> 
 
     <img src="../images/004.jpg"> 
 
     </div> 
 
     <div class="product"> 
 
     <img src="../images/004.jpg"> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="product"> 
 
     <img src="../images/004.jpg"> 
 
     </div> 
 
     <div class="product"> 
 
     <img src="../images/004.jpg"> 
 
     </div> 
 
     <div class="product"> 
 
     <img src="../images/004.jpg"> 
 
     </div> 
 
    </li>  
 
    </ul> 
 
</div>

Answer 1

Die Aufzählungspunkte brechen den Fluss. Entfernen Sie die Liste Styling:

#mai-contant > ul { 
    list-style: none; 
} 

Answer 2

Fügen Sie die folgenden CSS-Code-Zeile:

#mai-contant ul li:after { 
    content: ""; 
    display: table; 
    clear: both; 
}