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

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