如何在响应式设计中定义容器的填充

Question

我的风格如下：

.main-title {
    background: #000;
    color: #FFF;
    font: normal 1.5em "League Gothic", "Arial Narrow", Arial, sans-serif;*/
    text-transform: uppercase;
}

现在我不知道main-title容器的确切高度，因为它是multi-line标题。

我怎样才能声明一致的填充，无论它的高度如何？

Answer 1

正常的填充规则会为元素高度添加一致的填充无论。

.main-title {
    padding: 10px;
}

您可以使用百分比，如Torr3nt所提到的那样，这将使相应填充到元素父级的宽度。我创建了 this fiddle 来表明我的意思。如果元素定位于绝对值，则百分比将基于最接近的相对定位的祖先。