删除无边距和填充的div之间的空白

我有两个div，mini-date-holder和mini-event-holder之一。删除无边距和填充的div之间的空白

尽管事实上两者都没有余量和填充，他们正在呈现与他们之间的差距，我似乎无法弄清楚为什么。

有人知道为什么他们之间有差距，我怎么能摆脱它？

理想情况下，三个点应该低于数字。

我知道我可以使用类似transformY的东西，但我宁愿弄明白为什么它们被渲染得如此之远以开始。

请参考this JSFiddle或下面的代码。

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

来源

2016-07-16 quantumbutterfly

你需要提出的是，加上'垂直对齐的唯一调整：top'到'.mini事件持有者'=> [修订小提琴]（https://jsfiddle.net/zxos4eos/8/）| [说明]（http://stackoverflow.com/a/36975280/3597276） –

.mini_date{ 
 
\t flex: 1; 
 
\t text-align: center; 
 
\t font-family: "Roboto", "Helvetica", "Arial", sans-serif; 
 
\t font-weight: 400; 
 
} 
 
.mini-event{ 
 
\t width: 4px; 
 
\t height: 4px; 
 
\t background:red; 
 
\t border-radius: 2px; 
 
\t float: left; 
 
    margin-left: 1px; 
 
    margin-right: 1px; 
 
} 
 

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

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

 
.mini_date{ 
 
    line-height: 0; 
 
}

\t <div class="mini_date"> 
 
\t \t \t \t \t \t <div class="mini-date-holder">10</div> 
 
\t \t \t \t \t \t <div class="mini-event-holder"> \t 
 
\t \t \t \t \t \t \t <div class="mini-event"></div> 
 
\t \t \t \t \t \t \t <div class="mini-event"></div> 
 
\t \t \t \t \t \t \t <div class="mini-event"></div> 
 
\t \t \t \t \t \t </div> 
 
      </div>

来源

2016-07-16 01:55:45

我认为这是line-height财产。试穿2个div的行高设置为0

来源

2016-07-16 01:49:43 Dominofoe

因此，这消除了差距，但同时也移动了文本。有没有办法做到这一点，而没有文字移动？或者我将不得不在点上使用transformY？ – quantumbutterfly

这就是您使用填充或边距将div移动到位的位置。 – Dominofoe

删除无边距和填充的div之间的空白

回答

相关问题