In my HTML code, I have two divs with different classes - mini-date-holder and mini-event-holder.
Even though both of these divs are set to have no margin or padding, they are still displaying with a gap between them. I'm struggling to understand why this is happening.
Does anyone know the reason for this gap and how I can remove it?
I would like the three dots to appear directly below the number without any space in between.
I am aware that I could potentially use something like transformY, but I want to first determine the root cause of this rendering issue.
You can take a look at the provided JSFiddle link for reference or check out the code snippet below.
.mini_date {
flex: 1;
text-align: center;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
}
.mini-event {
width: 4px;
height: 4px;
background: red;
border-radius: 2px;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.mini-event-holder {
margin: 0 auto;
height: 4px;
display: inline-block;
margin: 0px;
padding: 0px;
}
.mini-date-holder {
margin: 0px;
padding: 0px;
}<div class="mini_date">
<div class="mini-date-holder">10</div>
<div class="mini-event-holder">
<div class="mini-event"></div>
<div class="mini-event"></div>
<div class="mini-event"></div>
</div>
</div>