Question

我试图创建两个div，其标题的灰色标题只有少量填充。

这是我的HTML

<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="small-grey-header">
                <p class="center-text">User Login</p>
            </div>

        </div>
        <div class="col-6">
            <div class="small-grey-header">
                <p class="center-text">Help Links</p>
            </div>
        </div>
    </div>
</div>

这是我的css

.center-text{
    text-align: center;
    display: block;
}

.small-grey-header{
    border-radius: 3px;
    background-color: lightgray;
    height: auto;
    padding-top: 1px;
    padding-bottom: .5px;
    margin-bottom: 5px;
}

问题是他们看起来很大，我不知道为什么。

这是我想要的

这就是我得到的

这是一个小提琴 https://jsfiddle.net/Ljsgtq0o/

我正在使用网格系统将这些并排设置，但我为了简单起见将其排除在外。即使在div上设置1个填充像素也会产生大量空间。我究竟做错了什么？请注意，我并不关心这两个标题之间的间距。我只是希望这些标题不要那么大。它们几乎看起来像纽扣。

Answer 1

引导程序margin-bottom: 10px上有一个默认p。您可以为该文字使用其他元素（例如div）或从p

中删除边距

如果您希望它们并排，请使用col-size-#类结构。

.center-text {
  text-align: center;
  display: block;
}

.small-grey-header {
  border-radius: 3px;
  background-color: lightgray;
  height: auto;
  padding-top: 1px;
  padding-bottom: .5px;
  margin-bottom: 5px;
}

.small-grey-header p {
  margin: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="small-grey-header">
        <p class="center-text">User Login</p>
      </div>

    </div>
    <div class="col-xs-6">
      <div class="small-grey-header">
        <p class="center-text">Help Links</p>
      </div>
    </div>
  </div>
</div>

Answer 2

尝试将max-width属性添加到small-gray-header类。例如：

最大宽度：100px的;

你有更短的按钮。

如果你想拥有较低的按钮，你只需编辑高度属性，在这种情况下你不必使用填充，你可以添加行高属性。

https://jsfiddle.net/Ljsgtq0o/2/

height: 25px;
line-height:25px;

什么在我的div容器中造成了这么大的空间？

2 个答案: