In the code snippet provided below, the focus is on table display.
* {
box-sizing: border-box;
}
.mother {
width: 300px;
margin: 2em auto;
background: peachpuff;
display: table;
}
.child {
display: inline-table;
width: 100px;
height: 100px;
background: cyan;
border: 1px solid #7a7a7a;
}<div class="mother">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>There seems to be an issue with the child boxes (.child) not being completely wrapped, which results in small white spaces. The question arises whether this is a result of using display: table or display: inline-table. If so, what display value(s) should be used to eliminate the whitespace?
Another concern pertains to changing the display value of .mother to table and that of .child to table-cell. In this scenario, the child elements adjust themselves regardless of the parent element's width. To ensure each row contains only 3 child elements for a perfect fit within a 300px wide parent element where each child is 100px wide, flex-wrap can provide a solution when used in conjunction with display: flex. What property should be utilized to address this issue?