1

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.

Refer to this JSFiddle or the code 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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
quantumbutterfly
  • 1,815
  • 4
  • 23
  • 38
  • The only adjustment you need to make is to add `vertical-align: top` to `.mini-event-holder` => [Revised Fiddle](https://jsfiddle.net/zxos4eos/8/) | [Explanation](http://stackoverflow.com/a/36975280/3597276) – Michael Benjamin Jul 16 '16 at 02:48

2 Answers2

2

.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>
Yasin Yaqoobi
  • 1,888
  • 3
  • 27
  • 38
0

I think it is the line-height property. try setting the line height on the 2 divs to 0.

Dominofoe
  • 603
  • 7
  • 18
  • So this removes the gap, but moves the text up as well. Is there any way to do it without having the text move? Or will I have to use transformY on the dots after all? – quantumbutterfly Jul 16 '16 at 01:57
  • That is where you use padding or margin to move your divs into position. – Dominofoe Jul 16 '16 at 02:00