CSS - 无法禁用 FlipClock.JS 生成的 DIV 的边距答案

【问题标题】：CSS - unable to disable margin for DIV generated by FlipClock.JSCSS - 无法禁用 FlipClock.JS 生成的 DIV 的边距
【发布时间】：2016-07-31 11:29:38
【问题描述】：

真的很奇怪。
我有一个包含使用 FlipClock.js 的计数器的 Div 元素
它的右侧有某种边距，我无法在 CSS 中覆盖。
无论我如何处理元素（工具中的内联样式或 CSS 本身，我都无法摆脱它，它正在推动其他内容） .
您需要 F12 并选择具有“fclock flip-clock-wrapper”类的 Div。
您会注意到它上面的突出显示显示它占用了额外的空间，就好像它被分配了一个边距一样。这是插件和原始 CSS 所在的小提琴：
FIDDLE
HTML：

    <td>
      <div class="fclock"></div>
    </td>

CSS 覆盖：

    .fclock {
transform-origin: 0 0;
transform: scale(.30);
-ms-transform: scale(.30);
-webkit-transform-origin: 0 0;
-webkit-transform: scale(.30);
-o-transform-origin: 0 0;
-o-transform: scale(.30);
-moz-transform-origin: 0 0;
-moz-transform: scale(.30);
}

JS：

     var currentDate = new Date(); 
// Set some date in the future. ***change to desired date***

var futureDate = new Date(2016, 07, 30, 08, 0, 0); //fixed as per comments
// Calculate the difference in seconds between the future and current date 
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000; 

var clock = $('.fclock').FlipClock(diff, {
   clockFace: 'DailyCounter',
   countdown: true
});

【问题讨论】：

CSS 有一个叫做“特异性”的东西。您应该在 W3Schools 或 MDN 上阅读更多相关信息。我假设您的选择器不像图书馆的那样具体。或者库已经覆盖了你的库，因为它后来被声明或使用了!important。
你看过小提琴吗？尝试玩它，看看你的想法。我有。
对不起。起初我没有看到，因为我以为您尝试过margin:0?我没有看到您的代码希望尝试禁用边距。
我做了我所知道的一切来删除它，但我不知道是什么产生了它。我什么都玩。我的覆盖 CSS 不包括边距设置，因为我想在任何弄乱边距之前让所有内容都保持原样。
对不起，我想我现在明白你的意思了。你说的是被推到第二行的数字。

标签： html css margin flipclock

【解决方案1】：

覆盖flipclock.css中.flip-clock-wrapper ul的样式定义，如下所示：

代码：

.flip-clock-wrapper ul.flip {
    position: relative;
    float: left;
    margin: 5px;
    width: auto;
    height: 80px;
    font-size: 22px;
    font-weight: bold;
    line-height: inherit;
    border-radius: 6px;
    background: #000;
    padding: 24px;
}

Fiddle or it didn't happen

PS：请注意我如何将 CSS 选择器从 .flip-clock-wrapper ul 更新为 .flip-clock-wrapper ul.list 以利用 CSS 特异性行为来确保我的样式声明覆盖 CSS 文件中的样式声明。

【讨论】：

我不明白，因为在时钟之后还有一个间隙。如果您按 F12，您可以在选择它时看到它被高亮标记。我在你的小提琴中......如果我给包装器提供 620px 的固定宽度，数字对齐但仍然存在差距，它将我的其余内容推到页面上（不在 Fiddle 中）。
这种差距是因为.fclock.flip-clock-wrapper div 的:before 和:after 选择器应用了display: table 样式。只需将其更改为display:none，多余的空间就会消失。