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中并为其设置负边距。但是如果你真的想要将文本粘贴在左边框旁边没有任何间距，则边距取决于你的字体大小。

Answer 2

很多方面。改为使用负边距在html中：
<div class="widgetText"><span>10</span></div>

和css：

 .widgetText span {
margin-left: -5px;}

Answer 3

空间是由于字体。如果您关注的是空间，请将text-indent: -4px;添加到窗口小部件文本

中

＆＃13;

.widgetText {
    font-size: 44px;
    border-left-style: solid;
    border-left-width: 4px;
    border-left-color: black;
    text-indent: -0.25em;
    
}

.widgetSubtitle {
    font-size: 12px;
    border-left-style: solid;
    border-left-width: 4px;
    border-left-color: black;
    color: gray
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <div class="row">
    <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>
  </div>
</div>

＆＃13;

Answer 4

你被误认为没有额外的填充，而不是在“10”之前。这是打印“10”所需的实际空间，并且没有获得任何其他额外空格。

查看所获得空间的图像。

没有-ve填充会影响空格。

删除div中某些文本左侧的间隙

4 个答案: