什么在我的div容器中造成如此大的空间？

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自举.您可以为该文本使用另一个元素(如a 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>