html - 删除div中某些文本左侧的空白

Question

我有什么:我正在尝试消除填充和文本之间的间隙，以便信息和标题在左侧完美对齐。下图显示文本 10 在左侧有一些空隙(我用红色矩形标记)。

这是 HTML 部分。

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
    <div class="panel panel-default">
        <div class="widgetText">10</div>
        <div class="widgetSubtitle">subtitle</div>
    </div>
</div>

这是我的 widgetText 和 widgetSubtitle 的 CSS。

.widgetText {
    font-size: 44px;
    border-left-style: solid;
    border-left-width: 4px;
    border-left-color: black;
}

.widgetSubtitle {
    font-size: 12px;
    border-left-style: solid;
    border-left-width: 4px;
    border-left-color: black;
    color: gray
}

实战问题:如何去除上图中红色矩形框内的缝隙？

到目前为止我尝试了什么:我尝试使用填充和各种方法。但是查看 Chromes 开发模式的框信息清楚地表明存在与填充无关的差距。除了负左填充之外，我找不到任何其他解决方案。

Answer 1

从技术上讲，没有间距。小空间来自您为 widgetText 申请的巨大字体。

Nagative padding 是无效的 CSS。

您可以做的是将文本包装在另一个 div 中并为其设置负边距。但是，如果您真的想将文本贴在左边框旁边而没有任何间距，则边距取决于您的字体大小。