CSS填充工作不正常？

我想我有一個填充問題。我做了一個簡單的盒子，只有padding: 20px;，對我來說，它看起來像填充底部超過20px。CSS填充工作不正常？

下面是一些截圖：

enter image description here

這裏是我的簡單的CSS：

.panel { 
    width: auto; 
    height: auto; 
    border-radius: 2px; 
    margin-bottom: 20px; 
    position: relative; 
} 

.panel-default { 
    padding: 20px; 
    border: 1px solid #e0e0e0; 
    background: #fff; 
} 

.panel-default > .panel-body { 
    font-size: 14px; 
}

HTML：

<div class="grid_4"> 
    <div class="panel panel-default"> 
     <div class="panel-body">Lorem ipsum dolor sit amet.</div> 
    </div> 
    </div>

我用960網格系統，但我不認爲這是因爲這一情況。而我在我的html, body {}箱子大小設置爲邊框和行高度爲24px。

希望有人能幫助我:)

來源

2015-12-02 Tafelglotzer

panel-body必須具有自己的行高/邊距/填充。 –

米無法看到任何change.Padding頂部和底部相同。看到這裏http://jsfiddle.net/vryLz62n/ –

等一分鐘..你談論白色背景或白色背景框的差距？ –

的填充是正常的，問題是你的margin-bottom: 20px;。

這應該是你的CSS：

.panel { 
    width: auto; 
    height: auto; 
    border-radius: 2px; 
    position: relative; 
} 

.panel-default { 
    padding: 20px; 
    border: 1px solid #e0e0e0; 
    background: #fff; 
} 

.panel-default > .panel-body { 
    font-size: 14px; 
}

此代碼將有您正在尋找的效果。

https://jsfiddle.net/r67nxyL5/

來源

2015-12-02 07:47:00

我需要margin-bottom，因爲當我有2個盒子時需要一點空間。 – Tafelglotzer

你有沒有嘗試給下面的div一個'margin-top'？可能已經解決了你的問題。 –

要麼你有一個保證金somewhere.You可以通過Internet瀏覽器（右鍵）檢查元素檢查。

，或者你可以嘗試浮動您.panel默認，給它像這樣的顯示塊：

.panel-default { 
    float: left; 
    display: block; 
}

如果這不起作用它絕對是一個下邊距的地方:)

來源

2015-12-02 08:36:25 cpalinckx

也許您沒有從段落標記中刪除默認的邊距，這會將其添加到底部。

嘗試將段落邊距設置爲0.

來源

2017-06-18 01:41:13

CSS填充工作不正常？

回答

相關問題