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。

希望有人能帮助我:)

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/

我需要margin-bottom，因为当我有2个盒子时需要一点空间。 – Tafelglotzer

你有没有尝试给下面的div一个'margin-top'？可能已经解决了你的问题。 –

答

要么你有一个保证金somewhere.You可以通过Internet浏览器（右键）检查元素检查。

，或者你可以尝试浮动您.panel默认，给它像这样的显示块：

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

如果这不起作用它绝对是一个下边距的地方:)

答

也许您没有从段落标记中删除默认的边距，这会将其添加到底部。

尝试将段落边距设置为0.

CSS填充工作不正常？

相关推荐