quantumbutterfly quantumbutterfly - 4 months ago 26
HTML Question

Remove gap between divs that have no margin and padding

Refer to this JSFiddle or the code below.

I have two divs, one of class

mini-date-holder
and one of class
mini-event-holder
. Despite the fact that both have no margin and padding, they are being rendered with a gap between them and I cannot seem to figure out why. Anybody know why they have a gap between them and how I can get rid of it? Ideally, the three dots should be just below the number.

I know I can use something like transformY, but I'd rather figure out why they're being rendered so far apart to begin with.

CSS:

.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;
}


HTML:

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

Answer

.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: 1px;
  margin-right: 1px;
}

.mini-event-holder{
	margin: 0 auto;
	height: 4px;
	display: inline-block;
	margin:0px;
	padding: 0px;

}
.mini-date-holder{
	margin: 0px;
    line-height: 1em;
	padding: 0px;
}

.mini_date{
     line-height: 0; 
}
	<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>

Comments