什麼導致我的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容器有這麼多的空間？

回答

相關問題