刪除無邊距和填充的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之間的空白

回答

相關問題