什么导致我的div容器有这么多的空间？

-1

我正在尝试创建两个div，其中包含只有少量填充的灰色标题。什么导致我的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像素的填充也会导致巨大的空间。我究竟做错了什么？请注意，我不关心这两个标题之间的间隔。我只是希望这些标题不要太大。他们几乎看起来像按钮。

来源

2017-06-12 onTheInternet

这是因为网格系统。检查并找出它。 –

请使用正确的网格类：'col-xs-6' – phil

**注意：**没有半像素。在一些浏览器中，子像素四舍五入会导致丑陋的情况。 – AlexG

从引导程序p上有默认margin-bottom: 10px。您可以为该文本使用另一个元素（如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>

来源

2017-06-12 14:35:21

虽然我没有使用bootstrap。即使我排除了我使用的网格系统，仍然会发生。 – onTheInternet

@onTheInternet为什么你要使用引导类呢？答案是相同的，除去'p'上的'margin'并且垂直间距减小到文本的大小https://codepen.io/anon/pen/RgRbVB –

我正在使用Simplegrid，它具有类像引导http：// simplegrid。io/ 而我只使用网格类;我已经删除了所有的字体类。我只是困惑，为什么这发生在一个小提琴，我得到相同的结果，但不包括框架。 p是否有默认的边距？ – onTheInternet

尝试最大宽度属性添加到小灰度头类。例如：

max-width：100px;

在那里你有更短的按钮。

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

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

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

来源

2017-06-12 14:37:13 tomanolatino

什么导致我的div容器有这么多的空间？

回答

相关问题